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

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

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

那么在微信小程序中,具体怎样引用自定义的图标的呢,大概的步骤我浅浅的分享如下:
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后缀的文件后,右上角会出现一个按钮,点击该按钮即可进入预览模式,具体操作如下图所示。
svg预览按钮
3、在浏览器打开https://www.sojson.com/image2base64.html?ivk_sa=1024320u网址,在图片转 BASE64菜单栏,点击【选择文件】按钮,找到并打开文件夹中的dot.svg文件,然后会出现下图圈出的红色方框base64编码。
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>
  • 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;
}
  • 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==');
}
  • 在项目pages同级文件夹的app.wxss中引入公用wxss文件,其中文件的路径根据自己新建的位置而定。
@import "./icon.wxss";

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

  • 17
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三脚猫的喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值