小程序symbol引入阿里云图标

需求:链接引入有颜色的图标
方法:阿里云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
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值