微信小程序怎么加载svg 图标
时间: 2023-07-13 12:36:39 浏览: 153
微信小程序里引入SVG矢量图标的方法
微信小程序可以通过使用 `wx.createInnerAudioContext` 方法来加载 SVG 图标。具体步骤如下:
1. 在小程序项目中添加 SVG 图标文件,通常以 `.svg` 作为文件扩展名。
2. 在需要使用 SVG 图标的页面或组件中,使用 `<svg>` 标签来创建 SVG 元素。
3. 在 `<svg>` 标签中添加 `<use>` 标签,用于引用 SVG 图标文件。例如:
```html
<svg class="icon" aria-hidden="true">
<use xlink:href="/images/icons.svg#icon-name"></use>
</svg>
```
其中 `xlink:href` 属性指向 SVG 图标文件的路径和图标名称,例如上面的示例中,SVG 图标文件的路径为 `/images/icons.svg`,图标名称为 `icon-name`。
4. 在 CSS 样式中设置 `.icon` 类的样式,例如:
```css
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
```
这样可以让 SVG 图标自适应容器大小,并且填充当前文本颜色。
注意:在微信小程序中,SVG 图标文件需要使用工具将其转换为 Base64 编码的字符串,并且在页面或组件中使用 `wx.createInnerAudioContext` 方法来加载该字符串。可以使用第三方工具库,如 `svg-to-dataurl`,来将 SVG 图标文件转换为 Base64 字符串。具体操作方法可以参考微信小程序官方文档。
阅读全文