iconfont官网：www.iconfont.cn/

PC端项目

首先去官网，找一套自己项目中使用的图标，添加到我的项目 （所有方法针对的是在线引入

方法1：Unicode （不推荐使用）

1.全局scss文件中引入

@font-face {
  font-family: 'iconfont';  /* Project id 3039524 */
  src: url('//at.alicdn.com/t/font_3039524_nicjv0bo3yo.woff2?t=1640065038585') format('woff2'),
       url('//at.alicdn.com/t/font_3039524_nicjv0bo3yo.woff?t=1640065038585') format('woff'),
       url('//at.alicdn.com/t/font_3039524_nicjv0bo3yo.ttf?t=1640065038585') format('truetype');
}

2.xxx.vue

<i class="iconfont">&#xe610;</i>

方法2：Font class （推荐使用）

1.项目中index.html中引入

 <link rel="stylesheet" href="//at.alicdn.com/t/font_3039524_nicjv0bo3yo.css" />

2.xxx.vue

需要加上iconfont默认样式，后面写自己的即可

<i class="iconfont icon-in_zhengyan"></i>

方法3：Symbol （推荐使用，支持多色图标）

1.项目中index.html中引入

 <script src="//at.alicdn.com/t/font_3039524_nicjv0bo3yo.js"></script>

2.xxx.vue

将自己的icon的id放在#后面即可

<svg aria-hidden="true" class="icon"><use xlink:href="#icon-in_zhengyan"></use></svg>

3.配置全局icon样式(base.css)

需要在全局样式中配置一下，默认的icon偏大或偏小

.icon {
    width: 2em;
    height: 2em;
    fill: currentColor;
    display: block;
}

小程序项目

由于小程序不支持svg,所以采用## mini-program-iconfont-cli 插件实现

1. 安装

npm install mini-program-iconfont-cli --save-dev

2. 生成配置文件

npx iconfont-init

这时候项目中会生产一个iconfont.json文件，将symbol_url替换为你的iconfont的Symbol地址链接

3.生成iconfont组件

npx iconfont-wechat

4.全局注册 (app.json文件)

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

5.使用iconfont

//name:iconfont的图标名  
//color:字体颜色
//size:字体大小
<iconfont name="look" color="#333" size="35" />

6.如何更新

1. 在iconfont.json文件中更换symbol_url
2. 执行 npx iconfont-wechat