uniapp引入彩色图标iconfont,uniapp引入svg不显示一并解决

2,262 阅读1分钟

站在在前人的肩膀上,又自己整理了一下。

项目中symbol模式下,下载到本地

微信截图_20210909133658.png

解压,打开文件夹,输入cmd

微信截图_20210909133948.png

回车,然后执行代码

npm install -g iconfont-tools

完成之后,继续在本目录下执行

iconfont-tools

按提示填写信息

微信截图_20210909134212.png 这时候在文件夹下会生成一个新的文件夹iconfont-weapp

微信截图_20210909134330.png

打开此文件夹,把iconfont-weapp-icon.css文件复制到static目录下

微信截图_20210909134439.png 是这样的

微信截图_20210909134826.png app.vue页面引入此css文件

@import './static/css/iconfont-weapp-icon.css';

页面中引用

<view class="t-icon t-icon-a-Group20"></view>

因为生成的iconfont-weapp-icon.css文件是t-icon

微信截图_20210909134924.png

划重点!!!

图标代码就是在项目中,fontClass模式下复制的那个代码,前面加上前缀t-,

就可以啦!

微信截图_20210909135158.png