uniapp中使用阿里彩色图标

uniapp中默认只能使用纯色图标,使用纯色图标的方法uniapp官网有可自行查看,如果项目中有使用阿里彩色或多色图标的需求就可借助iconfont-tools工具实现

1、把图标加入项目并点击下载到本地

uniapp中使用阿里彩色图标_第1张图片

 2、下载好后解压并在文件夹地址栏中输入cmd在终端打开,安装npm install -g iconfont-tools工具(如未安装),然后运行iconfont-tools,如下图   一直按回车就行

uniapp中使用阿里彩色图标_第2张图片

 3、然后文件夹会出现一个文件

uniapp中使用阿里彩色图标_第3张图片

 打开uniapp中使用阿里彩色图标_第4张图片只需要iconfont-weapp-icon.css一个文件就行,把该文件放在uniapp项目的static中并引入到App.vue的style中

uniapp中使用阿里彩色图标_第5张图片

 4、使用,可封装组件,也可不封装

uniapp中使用阿里彩色图标_第6张图片






组件使用

//main.js中引入可全局使用无需每次引入
import zhiconColor from "@/components/zh-icon/zh-iconColor.vue" //彩色icon
Vue.component('zh-iconColor', zhiconColor)



//使用

 不封装的直接使用


要以t-icon开头

你可能感兴趣的:(vue,uni-app)