微信小程序中使用阿里图标库

一、导入 wxss方式

• 简单迅速
• 图标类似文字处理
  • 只能单色

---

步骤：

• 1、添加需要的图标到项目
  • 购物车–> 项目
• 2、选择 font class
• 3、打开该链接，拷贝内容
• 4、粘贴内容到小程序路径：
  /static/wxss/iconfont.wxss
• 5、在 app.wxss 中引用
  @import "/static/wxss/iconfont.wxss";
• 6、使用的时候

  <text class="iconfont 复制图标名字到这"></text>

更新

• 重新复制生成的css文件到wxss文件就行

二、导入iconfont组件方式

• 类似图片，可以有彩色
• 导入麻烦

---

步骤：

• 1、挑选需要的图标进购物车–>项目

• 2、选择 symbol

• 3、复制该链接

• 4、小程序根目录下：

  • npm init -y
  • npm install mini-program-iconfont-cli --save-dev【安装插件】
  • npx iconfont init 生成iconfont.json 文件
  • 配置该文件

    {
    	"symbol_url": "https:将之前复制的链接粘贴到这",
    	"save_dir": "./iconfont",
    	"use_rpx": false,
    	"trim_icon_prefix": "icon",
    	"default_icon_size": 18
    }

  • npx iconfont-wechat 生成 iconfont目录

• 5、在app.json 文件按中配置

  "usingComponents": {
      "iconfont": "/iconfont/iconfont"
    }

• 6、使用

  <iconfont size="36" name="badanmu"></iconfont>

更新

• 更新 iconfont文件中的链接
• npx iconfont-wechat 根目录下使用该指令【失败就重新安装那个插件】

  说明：
  下载插件的时候，会生成 node_models 目录【体积较大】
  更新的时候依赖该目录，若没有该目录，需要重新执行下载插件命令
  引入后的使用并不依赖该目录【也就是说，可以删除】