需求:链接引入有颜色的图标
方法:阿里云symbol引入图标
资料:阿里云图标
步骤:
(阿里云图标加入和复制symbol链接忽略不写了)
- 初始化生成配置文件package.json
npm init -y
- 安装iconfont插件生成node_modules(不会被上传)
npm install mini-program-iconfont-cli --save-dev
- iconfont 初始化会出现help提示
npx iconfont init
//生成iconfont.json
npx iconfont-wechat
- 修改iconfont.json
1、synbol_url:阿里云链接地址
2、save_dir:保存的相对路径
3、use_rpx:是否使用rpx单位
4、trim_icon_prefix:去除前缀icon-,复制的图标就可以去掉icon-前缀了
5、default_icon_size:默认图标大小为18px
- 使用
<iconfont class="iconfont" name="dianzan" size="25"></iconfont>//name的信息去掉前缀
- 注意!!!
重新生成链接后复制在项目中,保存后要在项目终端中重新运行命令
npx iconfont-wechat
重新拉取更改后的icon