jiangyq
/
YZProjectCloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

微信小程序增加svg-icon

dev_xd
haha 2025-08-01 23:39:18 +08:00
parent e9653574d6
commit 19e702254e
12 changed files with 161 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
yanzhu-ui-app/miniprogram/.DS_Store vendored 100644
View File

Binary file not shown.

7
yanzhu-ui-app/miniprogram/components/svg-icon/base64.js 100644
View File

@ -0,0 +1,7 @@
/**
* Minified by jsDelivr using Terser v5.15.1.
* Original file: /npm/js-base64@3.7.5/base64.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!function(t,n){var r,e;"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(r=t.Base64,(e=n()).noConflict=function(){return t.Base64=r,e},t.Meteor&&(Base64=e),t.Base64=e)}("undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:this,(function(){"use strict";var t,n="3.7.5",r="function"==typeof atob,e="function"==typeof btoa,o="function"==typeof Buffer,u="function"==typeof TextDecoder?new TextDecoder:void 0,i="function"==typeof TextEncoder?new TextEncoder:void 0,f=Array.prototype.slice.call("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="),c=(t={},f.forEach((function(n,r){return t[n]=r})),t),a=/^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/,d=String.fromCharCode.bind(String),s="function"==typeof Uint8Array.from?Uint8Array.from.bind(Uint8Array):function(t){return new Uint8Array(Array.prototype.slice.call(t,0))},l=function(t){return t.replace(/=/g,"").replace(/[+\/]/g,(function(t){return"+"==t?"-":"_"}))},h=function(t){return t.replace(/[^A-Za-z0-9\+\/]/g,"")},p=function(t){for(var n,r,e,o,u="",i=t.length%3,c=0;c<t.length;){if((r=t.charCodeAt(c++))>255||(e=t.charCodeAt(c++))>255||(o=t.charCodeAt(c++))>255)throw new TypeError("invalid character found");u+=f[(n=r<<16|e<<8|o)>>18&63]+f[n>>12&63]+f[n>>6&63]+f[63&n]}return i?u.slice(0,i-3)+"===".substring(i):u},y=e?function(t){return btoa(t)}:o?function(t){return Buffer.from(t,"binary").toString("base64")}:p,A=o?function(t){return Buffer.from(t).toString("base64")}:function(t){for(var n=[],r=0,e=t.length;r<e;r+=4096)n.push(d.apply(null,t.subarray(r,r+4096)));return y(n.join(""))},b=function(t,n){return void 0===n&&(n=!1),n?l(A(t)):A(t)},g=function(t){if(t.length<2)return(n=t.charCodeAt(0))<128?t:n<2048?d(192|n>>>6)+d(128|63&n):d(224|n>>>12&15)+d(128|n>>>6&63)+d(128|63&n);var n=65536+1024*(t.charCodeAt(0)-55296)+(t.charCodeAt(1)-56320);return d(240|n>>>18&7)+d(128|n>>>12&63)+d(128|n>>>6&63)+d(128|63&n)},B=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g,x=function(t){return t.replace(B,g)},C=o?function(t){return Buffer.from(t,"utf8").toString("base64")}:i?function(t){return A(i.encode(t))}:function(t){return y(x(t))},m=function(t,n){return void 0===n&&(n=!1),n?l(C(t)):C(t)},v=function(t){return m(t,!0)},U=/[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3}/g,F=function(t){switch(t.length){case 4:var n=((7&t.charCodeAt(0))<<18|(63&t.charCodeAt(1))<<12|(63&t.charCodeAt(2))<<6|63&t.charCodeAt(3))-65536;return d(55296+(n>>>10))+d(56320+(1023&n));case 3:return d((15&t.charCodeAt(0))<<12|(63&t.charCodeAt(1))<<6|63&t.charCodeAt(2));default:return d((31&t.charCodeAt(0))<<6|63&t.charCodeAt(1))}},w=function(t){return t.replace(U,F)},S=function(t){if(t=t.replace(/\s+/g,""),!a.test(t))throw new TypeError("malformed base64.");t+="==".slice(2-(3&t.length));for(var n,r,e,o="",u=0;u<t.length;)n=c[t.charAt(u++)]<<18|c[t.charAt(u++)]<<12|(r=c[t.charAt(u++)])<<6|(e=c[t.charAt(u++)]),o+=64===r?d(n>>16&255):64===e?d(n>>16&255,n>>8&255):d(n>>16&255,n>>8&255,255&n);return o},E=r?function(t){return atob(h(t))}:o?function(t){return Buffer.from(t,"base64").toString("binary")}:S,D=o?function(t){return s(Buffer.from(t,"base64"))}:function(t){return s(E(t).split("").map((function(t){return t.charCodeAt(0)})))},R=function(t){return D(T(t))},z=o?function(t){return Buffer.from(t,"base64").toString("utf8")}:u?function(t){return u.decode(D(t))}:function(t){return w(E(t))},T=function(t){return h(t.replace(/[-_]/g,(function(t){return"-"==t?"+":"/"})))},Z=function(t){return z(T(t))},j=function(t){return{value:t,enumerable:!1,writable:!0,configurable:!0}},I=function(){var t=function(t,n){return Object.defineProperty(String.prototype,t,j(n))};t("fromBase64",(function(){return Z(this)})),t("toBase64",(function(t){return m(this,t)})),t("toBase64URI",(function(){return m(this,!0)})),t("toBase64URL",(function(){return m(this,!0)})),t("toUint8Array",(function(){return R(this)}))},O=function(){var t=function(t,n){return Object.defineProperty(Uint8Array.prototype,t,j(n))};t("toBase64",(function(t){return b(this,t)})),t("toBase64URI",(function(){return b(this,!0)})),t("toBase64URL",(function(){return b(this,!0)}))},P={version:n,VERSION:"3.7.5",atob:E,atobPolyfill:S,btoa:y,btoaPolyfill:p,fromBase64:Z,toBase64:m,encode:m,encodeURI:v,encodeURL:v,utob:x,btou:w,decode:Z,isValid:function(t){if("string"!=typeof t)return!1;var n=t.replace(/\s+/g,"").replace(/={0,2}$/,"");return!/[^\s0-9a-zA-Z\+/]/.test(n)||!/[^\s0-9a-zA-Z\-_]/.test(n)},fromUint8Array:b,toUint8Array:R,extendString:I,extendUint8Array:O,extendBuiltins:function(){I(),O()},Base64:{}};return Object.keys(P).forEach((function(t){return P.Base64[t]=P[t]})),P}));

114
yanzhu-ui-app/miniprogram/components/svg-icon/index.js 100644
View File

@ -0,0 +1,114 @@
import { encode } from "./base64";
const fs = wx.getFileSystemManager();
// 临时文件缓存
const tempFileMap = new Map();
// 同步 wx.downloadFile
const downloadFileSync = (url) =>
new Promise((resolve, reject) => {
wx.downloadFile({
url,
success: resolve,
fail: reject,
});
});
Component({
externalClasses: ["image-class"],
properties: {
src: String, // svg 资源地址，暂仅支持本地路径
color: String, // svg 颜色
colors: null, // svg 颜色配置，支持数组或对象
mode: String, // svg 裁剪、缩放的模式
size: {
type: Number,
value: 48, // 默认宽度为24
},
},
observers: {
async "src, color, colors"(src, color, colors) {
try {
if (
color ||
(colors && (colors.length > 0 || Object.keys(colors).length > 0))
) {
let data;
if (src.indexOf(".") == -1 && src.indexOf("/") == -1) {
src = `/images/svg/${src}.svg`;
}
// 网络资源下载，排除开发工具临时路径格式: http://tmp/
if (/^http(s)?:\/\//.test(src) && !/^http:\/\/tmp\//.test(src)) {
let tempFilePath = tempFileMap.get(src);
try {
if (!tempFilePath) throw tempFilePath;
// 检查临时文件是否存在
fs.accessSync(tempFilePath);
} catch (err) {
tempFilePath = (await downloadFileSync(src)).tempFilePath;
// 缓存临时文件
tempFileMap.set(src, tempFilePath);
}
data = fs.readFileSync(tempFilePath, "utf8");
} else {
data = fs.readFileSync(src, "utf8");
}
// eslint-disable-next-line no-param-reassign
if (!colors) colors = {}; // 默认值
if (/(fill|stroke)=".*?"/.test(data)) {
let index = 0;
data = data.replace(/(fill|stroke)=".*?"/g, (matched) => {
// 获取原本颜色
const matchedColor = matched.slice(matched.indexOf('"') + 1, -1);
// 设置替换颜色
const replaceColor =
colors[index++] ||
colors[matchedColor] ||
color ||
matchedColor;
if (/fill/.test(matched)) return `fill="${replaceColor}"`;
if (/stroke/.test(matched)) return `stroke="${replaceColor}"`;
return `fill="${replaceColor}"`;
});
}
// 设置默认底色
const defaultColor =
colors["#000"] || colors["#000000"] || colors.black || color;
// svg 标签是否包含底色
if (
defaultColor &&
!/fill=".*?"/.test(data.slice(0, data.indexOf(">")))
) {
data = data.replace(/<svg /, `<svg fill="${defaultColor}" `);
}
this.setData({
base64: `data:image/svg+xml;base64, ${encode(data)}`,
});
} else {
this.setData({
base64: src,
});
}
} catch (err) {
console.error(err);
this.triggerEvent("error", err);
}
},
},
data: {
base64: "",
},
methods: {
onImageError(e) {
this.triggerEvent("error", e.detail);
},
onImageLoad(e) {
this.triggerEvent("load", e.detail);
},
onTap(e) {
this.triggerEvent("click", e.detail);
},
},
});

4
yanzhu-ui-app/miniprogram/components/svg-icon/index.json 100644
View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

10
yanzhu-ui-app/miniprogram/components/svg-icon/index.wxml 100644
View File

@ -0,0 +1,10 @@
<image
class="svg-icon image-class"
src="{{base64}}"
mode="{{mode}}"
style="width: {{size}}rpx; height: {{size}}rpx;"
binderror="onImageError"
bindload="onImageLoad"
bindtap="onTap"
hover-class="image-hover"
/>

7
yanzhu-ui-app/miniprogram/components/svg-icon/index.wxss 100644
View File

@ -0,0 +1,7 @@
.svg-icon {
display: block;
}
.image-hover {
opacity: 0.7;
}

14
yanzhu-ui-app/miniprogram/config.js
View File

@ -2,9 +2,15 @@
module.exports = {
timeout: 60000,
appId: "wx46466c7828eede2b",
//baseUrl: 'https://xiangguan.sxyanzhu.com/wechat',
baseUrl: 'http://127.0.0.1:8080',
baseImgUrl: 'https://xiangguan.sxyanzhu.com',
baseUrl: "https://xiangguan.sxyanzhu.com/wechat",
//baseUrl: 'http://127.0.0.1:8080',
baseImgUrl: "https://xiangguan.sxyanzhu.com",
//baseImgUrl: 'http://127.0.0.1:9300',
noSecuritys: ['/code', '/auth/wxLogin', '/auth/getMaOpenId', '/auth/getMaPhoneNumber', '/auth/maLogin']
noSecuritys: [
"/code",
"/auth/wxLogin",
"/auth/getMaOpenId",
"/auth/getMaPhoneNumber",
"/auth/maLogin",
],
};

1
yanzhu-ui-app/miniprogram/images/svg/add.svg 100644
View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4338"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#5A98D2" p-id="4339"></path><path d="M739.555556 568.888889H284.444444c-34.133333 0-56.888889-22.755556-56.888888-56.888889s22.755556-56.888889 56.888888-56.888889h455.111112c34.133333 0 56.888889 22.755556 56.888888 56.888889s-22.755556 56.888889-56.888888 56.888889z" fill="#FFFFFF" p-id="4340"></path><path d="M512 796.444444c-34.133333 0-56.888889-22.755556-56.888889-56.888888V284.444444c0-34.133333 22.755556-56.888889 56.888889-56.888888s56.888889 22.755556 56.888889 56.888888v455.111112c0 34.133333-22.755556 56.888889-56.888889 56.888888z" fill="#FFFFFF" p-id="4341"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 859 B

1
yanzhu-ui-app/miniprogram/images/svg/add2.svg 100644
View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4973"><path d="M512 75.09333333c240.29866667 0 436.90666667 196.608 436.90666667 436.90666667s-196.608 436.90666667-436.90666667 436.90666667-436.90666667-196.608-436.90666667-436.90666667 196.608-436.90666667 436.90666667-436.90666667m0-72.81777778C228.01066667 2.27555555 2.27555555 228.01066667 2.27555555 512s225.73511111 509.72444445 509.72444445 509.72444445 509.72444445-225.73511111 509.72444445-509.72444445-225.73511111-509.72444445-509.72444445-509.72444445z" fill="#333333" p-id="4974"></path><path d="M293.54666667 512m-36.40888889 0a36.40888889 36.40888889 0 1 0 72.81777777 0 36.40888889 36.40888889 0 1 0-72.81777777 0Z" fill="#333333" p-id="4975"></path><path d="M730.45333333 512m-36.40888888 0a36.40888889 36.40888889 0 1 0 72.81777777 0 36.40888889 36.40888889 0 1 0-72.81777777 0Z" fill="#333333" p-id="4976"></path><path d="M512 293.54666667m-36.40888889 0a36.40888889 36.40888889 0 1 0 72.81777778 0 36.40888889 36.40888889 0 1 0-72.81777778 0Z" fill="#333333" p-id="4977"></path><path d="M512 730.45333333m-36.40888889 0a36.40888889 36.40888889 0 1 0 72.81777778 0 36.40888889 36.40888889 0 1 0-72.81777778 0Z" fill="#333333" p-id="4978"></path><path d="M293.54666667 475.59111111h436.90666666v72.81777778H293.54666667z" fill="#333333" p-id="4979"></path><path d="M475.59111111 293.54666667h72.81777778v436.90666666h-72.81777778z" fill="#333333" p-id="4980"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
yanzhu-ui-app/miniprogram/pageage/project_checked/list/index.json
View File

@ -1,4 +1,6 @@
{
"usingComponents": {},
"usingComponents": {
"svg-icon": "/components/svg-icon/index"
},
"navigationStyle": "custom"
}

2
yanzhu-ui-app/miniprogram/pageage/project_checked/list/index.wxml
View File

@ -59,6 +59,8 @@
<view style="color: #a5abbb;">暂无数据</view>
</view>
</view>
<svg-icon src="/images/svg/add.svg" colors="{{['#ff0000','#fff','#fff']}}" />
<svg-icon src="add2" color="green" size="64" />
<view wx:if="{{isGroup}}" class="inspect_add_to" bindtap="skipAdd">
<view style="padding-top: 22rpx;">
<image src="/images/new_add.png"></image>

21
yanzhu-ui-app/miniprogram/project.private.config.json
View File

@ -19,25 +19,6 @@
"ignoreDevUnusedFiles": true,
"bigPackageSizeSupport": false
},
"condition": {
"miniprogram": {
"list": [
{
"name": "pages/project_qr/index",
"pathName": "pages/project_qr/index",
"query": "QRPID=133&SIGID=3&PARID=109",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/login/login",
"query": "proId=1",
"launchMode": "default",
"scene": null
}
]
}
},
"condition": {},
"libVersion": "3.8.9"
}