让uniapp小程序支持多色图标icon：iconfont-tools-cli

陨石猎人

已于 2024-01-20 10:41:16 修改

阅读量3.2k

点赞数 8

分类专栏： uniapp 文章标签： uni-app 小程序 vue

于 2024-01-20 10:40:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42205731/article/details/135712026

版权

前景：

uniapp开发小程序项目时，对于iconfont多色图标无法直接支持；若将多色icon下载引入项目则必须关注包体，若将图标放在oss或者哪里管理，加载又是一个问题，因此大多采用iconfont-tools工具，但是iconfont-tools使用需要下载iconfont-tools工程进行编译转换，过于繁琐，因此我在iconfont-tools工具的基础上进行了改造，yarn安装，配置，项目正常启动或打包直接执行编译。

基于iconfont-tools的改造工具：iconfont-tools-cli

安装

yarn add iconfont-tools-cli

配置/使用

1、在项目根目录创建配置文件：config/iconfont.config.js

module.exports = {
  iconfontUrl: '//at.alicdn.com/t/c/font_xxxxxx.js', // 矢量图标库Symbol地址
  dirName: 'iconfont', // 需要生成的css对应文件夹
  fileName: 'anterpm-symbol', // css文件名称
  icon: 'anterpm-symbol', // Font Family
  fontSize: