微信小程序如何使用svg矢量图标_微信小程序 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>
1
2
3
4
5
6

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"></text>
  <text class="icon icon-male"></text>
  <text class="icon icon-photo"></text>
</view>
<view class="demo-box">
  <text class="icon icon-power"></text>
  <text class="icon icon-aiming"></text>
  <text class="icon icon-more"></text>
</view>
<view class="demo-box">
  <text class="icon icon-set"></text>
  <text class="icon icon-tool"></text>
  <text class="icon icon-save"></text>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• index.wxss文件（如果只是局部使用，可以只在此文件中引入公用文件即可，具体引入方法与全局引入方法一样）

page {
  background-color: #f1f1f1;
}

.demo-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 30rpx;
  font-size: 32rpx;
}

.demo-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20rpx;
  padding: 40rpx 0;
  background-color: white;
  border-radius: 20rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• icon.wxss全局共用文件

.icon {
  height: 45rpx;
  width: 45rpx;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* 全部 */
.icon-all {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xOCA2SDhDNi44OTU0MyA2IDYgNi44OTU0MyA2IDhWMThDNiAxOS4xMDQ2IDYuODk1NDMgMjAgOCAyMEgxOEMxOS4xMDQ2IDIwIDIwIDE5LjEwNDYgMjAgMThWOEMyMCA2Ljg5NTQzIDE5LjEwNDYgNiAxOCA2WiIgZmlsbD0iIzJGODhGRiIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTggMjhIOEM2Ljg5NTQzIDI4IDYgMjguODk1NCA2IDMwVjQwQzYgNDEuMTA0NiA2Ljg5NTQzIDQyIDggNDJIMThDMTkuMTA0NiA0MiAyMCA0MS4xMDQ2IDIwIDQwVjMwQzIwIDI4Ljg5NTQgMTkuMTA0NiAyOCAxOCAyOFoiIGZpbGw9IiMyRjg4RkYiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQwIDZIMzBDMjguODk1NCA2IDI4IDYuODk1NDMgMjggOFYxOEMyOCAxOS4xMDQ2IDI4Ljg5NTQgMjAgMzAgMjBINDBDNDEuMTA0NiAyMCA0MiAxOS4xMDQ2IDQyIDE4VjhDNDIgNi44OTU0MyA0MS4xMDQ2IDYgNDAgNloiIGZpbGw9IiMyRjg4RkYiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQwIDI4SDMwQzI4Ljg5NTQgMjggMjggMjguODk1NCAyOCAzMFY0MEMyOCA0MS4xMDQ2IDI4Ljg5NTQgNDIgMzAgNDJINDBDNDEuMTA0NiA0MiA0MiA0MS4xMDQ2IDQyIDQwVjMwQzQyIDI4Ljg5NTQgNDEuMTA0NiAyOCA0MCAyOFoiIGZpbGw9IiMyRjg4RkYiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
}

/* 瞄准 */
.icon-aiming {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjIwIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNCAzN1Y0NFYzN1oiIGZpbGw9IiMyRjg4RkYiLz48cGF0aCBkPSJNMjQgMzdWNDQiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM2IDI0SDQ0SDM2WiIgZmlsbD0iIzJGODhGRiIvPjxwYXRoIGQ9Ik0zNiAyNEg0NCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNCAyNEgxMUg0WiIgZmlsbD0iIzJGODhGRiIvPjxwYXRoIGQ9Ik00IDI0SDExIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNCAxMVY0VjExWiIgZmlsbD0iIzJGODhGRiIvPjxwYXRoIGQ9Ik0yNCAxMVY0IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
}

/* 更多 */
.icon-more {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjEyIiBjeT0iMjQiIHI9IjMiIGZpbGw9IiMzMzMiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIzIiBmaWxsPSIjMzMzIi8+PGNpcmNsZSBjeD0iMzYiIGN5PSIyNCIgcj0iMyIgZmlsbD0iIzMzMyIvPjwvc3ZnPg==');
}

/* 开关 */
.icon-power {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNC41IDhDMTMuODQwNiA4LjM3NjUyIDEzLjIwNjIgOC43OTEwMyAxMi42IDkuMjQwNTFDMTEuNTYyNSAxMC4wMDk3IDEwLjYwNzQgMTAuODgxNCA5Ljc1IDExLjg0MDJDNi43OTM3NyAxNS4xNDYzIDUgMTkuNDg5MSA1IDI0LjI0NTVDNSAzNC42MDMzIDEzLjUwNjYgNDMgMjQgNDNDMzQuNDkzNCA0MyA0MyAzNC42MDMzIDQzIDI0LjI0NTVDNDMgMTkuNDg5MSA0MS4yMDYyIDE1LjE0NjMgMzguMjUgMTEuODQwMkMzNy4zOTI2IDEwLjg4MTQgMzYuNDM3NSAxMC4wMDk3IDM1LjQgOS4yNDA1MUMzNC43OTM4IDguNzkxMDMgMzQuMTU5NCA4LjM3NjUyIDMzLjUgOCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yNCA0VjI0IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
}

/* 男性 */
.icon-male {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00MS45NTE3IDE1LjA0ODNWNi4wNDgzNEgzMi45NTE3IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTEwLjQxMzUgMzguMDAwN0MxNS44ODA4IDQzLjQ2ODEgMjQuNzQ1MSA0My40NjgxIDMwLjIxMjUgMzguMDAwN0MzMi45NDYyIDM1LjI2NzEgMzQuMzEzIDMxLjY4NDEgMzQuMzEzIDI4LjEwMTJDMzQuMzEzIDI0LjUxODMgMzIuOTQ2MiAyMC45MzU0IDMwLjIxMjUgMTguMjAxN0MyNC43NDUxIDEyLjczNDQgMTUuODgwOCAxMi43MzQ0IDEwLjQxMzUgMTguMjAxN0M0Ljk0NjE1IDIzLjY2OTEgNC45NDYxNSAzMi41MzM0IDEwLjQxMzUgMzguMDAwN1oiIGZpbGw9IiMyRjg4RkYiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTMwLjAwMDIgMTcuOTk5OUwzOS45NTE3IDguMDQ4MzgiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=');
}

/* 照片 */
.icon-photo {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNSAxMEM1IDguODk1NDMgNS44OTU0MyA4IDcgOEw0MSA4QzQyLjEwNDYgOCA0MyA4Ljg5NTQzIDQzIDEwVjM4QzQzIDM5LjEwNDYgNDIuMTA0NiA0MCA0MSA0MEg3QzUuODk1NDMgNDAgNSAzOS4xMDQ2IDUgMzhWMTBaIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC41IDE4QzE1LjMyODQgMTggMTYgMTcuMzI4NCAxNiAxNi41QzE2IDE1LjY3MTYgMTUuMzI4NCAxNSAxNC41IDE1QzEzLjY3MTYgMTUgMTMgMTUuNjcxNiAxMyAxNi41QzEzIDE3LjMyODQgMTMuNjcxNiAxOCAxNC41IDE4WiIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNSAyNEwyMCAyOEwyNiAyMUw0MyAzNFYzOEM0MyAzOS4xMDQ2IDQyLjEwNDYgNDAgNDEgNDBIN0M1Ljg5NTQzIDQwIDUgMzkuMTA0NiA1IDM4VjM0TDE1IDI0WiIgZmlsbD0iIzJGODhGRiIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=');
}

/* 设置 */
.icon-set {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0zNi42ODYgMTUuMTcxQzM3LjkzNjQgMTYuOTY0MyAzOC44MTYzIDE5LjAzNTIgMzkuMjE0NyAyMS4yNzI3SDQ0VjI2LjcyNzNIMzkuMjE0N0MzOC44MTYzIDI4Ljk2NDggMzcuOTM2NCAzMS4wMzU3IDM2LjY4NiAzMi44MjlMNDAuMDcwNiAzNi4yMTM3TDM2LjIxMzcgNDAuMDcwNkwzMi44MjkgMzYuNjg2QzMxLjAzNTcgMzcuOTM2NCAyOC45NjQ4IDM4LjgxNjMgMjYuNzI3MyAzOS4yMTQ3VjQ0SDIxLjI3MjdWMzkuMjE0N0MxOS4wMzUyIDM4LjgxNjMgMTYuOTY0MyAzNy45MzY0IDE1LjE3MSAzNi42ODZMMTEuNzg2MyA0MC4wNzA2TDcuOTI5MzkgMzYuMjEzN0wxMS4zMTQgMzIuODI5QzEwLjA2MzYgMzEuMDM1NyA5LjE4MzcyIDI4Ljk2NDggOC43ODUzMyAyNi43MjczSDRWMjEuMjcyN0g4Ljc4NTMzQzkuMTgzNzIgMTkuMDM1MiAxMC4wNjM2IDE2Ljk2NDMgMTEuMzE0IDE1LjE3MUw3LjkyOTM5IDExLjc4NjNMMTEuNzg2MyA3LjkyOTM5TDE1LjE3MSAxMS4zMTRDMTYuOTY0MyAxMC4wNjM2IDE5LjAzNTIgOS4xODM3MiAyMS4yNzI3IDguNzg1MzNWNEgyNi43MjczVjguNzg1MzNDMjguOTY0OCA5LjE4MzcyIDMxLjAzNTcgMTAuMDYzNiAzMi44MjkgMTEuMzE0TDM2LjIxMzcgNy45MjkzOUw0MC4wNzA2IDExLjc4NjNMMzYuNjg2IDE1LjE3MVoiIGZpbGw9IiMyRjg4RkYiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTI0IDI5QzI2Ljc2MTQgMjkgMjkgMjYuNzYxNCAyOSAyNEMyOSAyMS4yMzg2IDI2Ljc2MTQgMTkgMjQgMTlDMjEuMjM4NiAxOSAxOSAyMS4yMzg2IDE5IDI0QzE5IDI2Ljc2MTQgMjEuMjM4NiAyOSAyNCAyOVoiIGZpbGw9IiM0M0NDRjgiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
}

/* 工具 */
.icon-tool {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00NCAxNkM0NCAyMi42Mjc0IDM4LjYyNzQgMjggMzIgMjhDMjkuOTczMyAyOCAyOC4wNjM5IDI3LjQ5NzUgMjYuMzg5NiAyNi42MTA0TDkgNDRMNCAzOUwyMS4zODk2IDIxLjYxMDRDMjAuNTAyNSAxOS45MzYxIDIwIDE4LjAyNjcgMjAgMTZDMjAgOS4zNzI1OCAyNS4zNzI2IDQgMzIgNEMzNC4wMjY3IDQgMzUuOTM2MSA0LjUwMjQ1IDM3LjYxMDQgNS4zODk1OUwzMCAxM0wzNSAxOEw0Mi42MTA0IDEwLjM4OTZDNDMuNDk3NSAxMi4wNjM5IDQ0IDEzLjk3MzMgNDQgMTZaIiBmaWxsPSIjMkY4OEZGIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
}

/* 保存 */
.icon-save {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02IDlDNiA3LjM0MzE1IDcuMzQzMTUgNiA5IDZIMzQuMjgxNEw0MiAxMy4yMDY1VjM5QzQyIDQwLjY1NjkgNDAuNjU2OSA0MiAzOSA0Mkg5QzcuMzQzMTUgNDIgNiA0MC42NTY5IDYgMzlWOVoiIGZpbGw9IiMyRjg4RkYiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wMDgzIDZMMjQgMTMuMzg0NkMyNCAxMy43MjQ1IDIzLjU1MjMgMTQgMjMgMTRIMTVDMTQuNDQ3NyAxNCAxNCAxMy43MjQ1IDE0IDEzLjM4NDZMMTQgNiIgZmlsbD0iIzQzQ0NGOCIvPjxwYXRoIGQ9Ik0yNC4wMDgzIDZMMjQgMTMuMzg0NkMyNCAxMy43MjQ1IDIzLjU1MjMgMTQgMjMgMTRIMTVDMTQuNDQ3NyAxNCAxNCAxMy43MjQ1IDE0IDEzLjM4NDZMMTQgNkgyNC4wMDgzWiIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOSA2SDM0LjI4MTQiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTQgMjZIMzQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTQgMzRIMjQuMDA4MyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==');
}

/* 点 */
.icon-dot {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yNCAzM0MyOC45NzA2IDMzIDMzIDI4Ljk3MDYgMzMgMjRDMzMgMTkuMDI5NCAyOC45NzA2IDE1IDI0IDE1QzE5LjAyOTQgMTUgMTUgMTkuMDI5NCAxNSAyNEMxNSAyOC45NzA2IDE5LjAyOTQgMzMgMjQgMzNaIiBmaWxsPSIjMzMzIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIvPjwvc3ZnPg==');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

• 在项目pages同级文件夹的app.wxss中引入公用wxss文件，其中文件的路径根据自己新建的位置而定。

@import "./icon.wxss";
1

上述代码中未用到js代码，对于svg代码的编写，在网上有很多，有兴趣可以自己多学学，正所谓技多不压身。