vue中使用icon-font

官网 ↓

https://www.iconfont.cn/

为了客户体验，选择将图标打包下载到本地的方式。

font-class ↓

选择需要的图标，加入购物车。

打开购物车，添加进项目。点击“下载至本地” ↓
会下载好一个 download.zip 的压缩包。解压缩后，看到10个文件 ↓
先创建一个iconfont的文件夹，位置自便。我放在了src -- assets -- iconfont（新创建）。复制如图所示这五个文件 ↓

接下来全局引入。在main.js中引入iconfont.css ↓

import "@/assets/iconfont/iconfont.css";

使用icon ↓

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

tada~~
就可以在vue中使用阿里的icon啦~可以直接将颜色写在style中 ↓

        i{
          margin-right:4px;
          color:rgb(69, 137, 148);
        }

成图 ↓

svg ↓

或想直接使用阿里给出的svg，在引入文件的步骤中多引入一个js文件 ↓

在main.js中引入

import "@/assets/iconfont/iconfont.js"

因为常用，一般写在公共样式中 ↓

.icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    overflow: hidden;
}

在需要icon的地方编写 ↓

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

以上两步注意类名一致。。

tada~~
网站本身的彩色图标~

补充：（循环使用）

<i :class="'iconfont' + ' ' + item.icon"></i>