小程序 iconfont彩色图标 --Symbol

第一步：安装插件

// Yarn
yarn add mini-program-iconfont-cli --dev
// Npm
npm install mini-program-iconfont-cli --save-dev

第二步：生成配置文件

npx iconfont-init
 
// 或者
 
npx iconfont-wechat

2020011516491885.png

第三步
symbol_url --- 复制iconfont官网你的项目的Symbol链接

20200115165216138.png

第四步：生成小程序组件

npx iconfont-wechat

第五步：注册iconfont组件并使用

// 绝对路径
{
    "usingComponents": {
        "iconfont": "/iconfont/iconfont"
    }
}

使用：在.wxml文件中去使用
注意：我是在根目录下的iconfont.json文件中省略了图标前缀"icon-"

<iconfont name="icon_salary"></iconfont>

修改iconfont图标大小

20200115172708242.png

更新iconfont项目中的图标后

npx iconfont-wechat