微信小程序使用SVG图标的完美解决方案

解决方案

这里采用的方案是借鉴 antfu 大佬的 聊聊纯 CSS 图标，此方案也被用于 unocss 的 Icons preset (unocss.dev) 中。

这个方案非常简单，用 DataURI 中的图标作为背景图，并创建如下 CSS。

单色图标

.my-icon {
  --un-icon: url(...);
  mask: var(--un-icon) no-repeat;
  mask-size: 100% 100%;
  background-color: currentColor;
  color: inherit;
  width: 1em;
  height: 1em;
}

彩色图标

.my-icon {
    --un-icon: url(...);
    background: var(--un-icon) no-repeat;
    background-size: 100% 100%';
    background-color: transparent;
    height': 1em;
    width': 1em;
}

在小程序中使用

1. 找图标

打开 icones 找到自己喜欢的图标，并点击复制 Data URL

2. 在小程序代码中使用

在 .wxss 文件中添加如下样式, 以 carbon 分类下的 alarm 图标为例, 将刚才复制的 Data URL 粘贴到 --un-icon: url(...) 的括号中

.i-carbon-alarm {
    --un-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTE2IDI4YTExIDExIDAgMSAxIDExLTExYTExIDExIDAgMCAxLTExIDExWm0wLTIwYTkgOSAwIDEgMCA5IDlhOSA5IDAgMCAwLTktOVoiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xOC41OSAyMUwxNSAxNy40MVYxMWgydjUuNThsMyAzLjAxTDE4LjU5IDIxek00IDcuNTkybDMuNTgyLTMuNTg5bDEuNDE2IDEuNDEzbC0zLjU4MiAzLjU4OXptMTktMi4xODRsMS40MTUtMS40MTNsMy41ODEgMy41ODlsLTEuNDE1IDEuNDEzeiIvPjwvc3ZnPg==");
    mask: var(--un-icon) no-repeat;
    mask-size: 100% 100%;
    background-color: currentColor;
    color: inherit;
    width: 1em;
    height: 1em;
}

在 .wxml 添加如下代码即可

<view class="i-carbon-alarm"></view>