微信小程序如何使用svg矢量图标

微信小程序如何使用自定义SVG矢量图标

在微信小程序中，经常会用到小图标来装饰界面，我们常用的方法就是引用第三方的图标，但会存在收费或者找不到合适的图标，这时候我建议可以自行编写svg图标代码，就可以随心所欲的使用。具体的效果图如下：

那么在微信小程序中，具体怎样引用自定义的图标的呢，大概的步骤我浅浅的分享如下：
1、在Visual Studio Code编辑器或者其他编辑器编写新建一个.svg的文件，编写svg代码，例如：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M24 33C28.9706 33 33 28.9706 33 24C33 19.0294 28.9706 15 24 15C19.0294 15 15 19.0294 15 24C15 28.9706 19.0294 33 24 33Z"
        fill="#2F88FF" stroke="#2F88FF" stroke-width="4" />
</svg>

2、点击预览按钮，如果在Visual Studio Code找不到预览的按钮，可以在Visual Studio Code中，使用Ctrl+Shift+X快捷键来打开扩展面板，然后搜索并安装Vscode-svg-previewer扩展，然后选中.svg后缀的文件后，右上角会出现一个按钮，点击该按钮即可进入预览模式，具体操作如下图所示。

3、在浏览器打开https://www.sojson.com/image2base64.html?ivk_sa=1024320u网址，在图片转 BASE64菜单栏，点击【选择文件】按钮，找到并打开文件夹中的dot.svg文件，然后会出现下图圈出的红色方框base64编码。

4、打开微信开发者工具，新建一个小程序项目，并新建一个wxss格式的公用文件，将svg转换后的base64文件根据名称粘贴到此文件中，例如我新建的wxss名称为icon.wxss，具体新建的文件路径根据自己的习惯。在微信小程序项目中的步骤详细代码如下：

• index.wxml文件

<view class="demo-title">微信小程序<text class="icon icon-dot"></text>图标示例</view>
<view class="demo-box">
  <text class="icon icon-all">