电商网站建设推广,营销型企业网站建设案例,校园网页设计模板素材,平面设计软件下载前景#xff1a;
uniapp开发小程序项目时#xff0c;对于iconfont多色图标无法直接支持#xff1b;若将多色icon下载引入项目则必须关注包体#xff0c;若将图标放在oss或者哪里管理#xff0c;加载又是一个问题#xff0c;因此大多采用iconfont-tools工具#xff0c;但…前景
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 FamilyfontSize: 16px, // 默认大小
}; 2、package.json中配置命令
update:iconfont: node node_modules/iconfont-tools-cli/lib/cli.js --config config/iconfont.config.js --to $INIT_CWD/src/static/css, 命令中 config/iconfont.config.js就是根目录下编译需要使用的配置文件 --to $INIT_CWD/src/static/css就是需要生成到对应位置/文件夹
3、将编译/更新命令配置到项目启动或打包中去 4、项目启动/打包后会看到生成的css文件并将其引入App.vue文件中 注iconfont-tools实现方式是通过background-image实现多色图标的展示因此需要注意在使用时需要时块级或者行内块的标签
