vue中使用阿里图标库创建一个自定义的图标库

vue中使用阿里图标库

• 登录阿里图标库，选择自己需要的阿里图标，添加到库，然后下载代码，如果项目中用到的图标很多的话，先添加到库，然后添加至我的项目下载到本地。

• 将下载到本地的阿里图标压缩包解压，我们可以看到如下图的文件

• 在已经搭建好的vue项目中 assets 下添加一个新的文件夹 font ，将文件夹中的 .css、.eot 、.ttf 、.ttf 、.woff 、.woff2、格式的文件复制到 font 文件夹下，并且在vue项目中的 main.js引入 iconfont.css import '@/assets/font/iconfont.css',现在就可以直接使用阿里图标了<i class="iconfont icon-xxx"></i>。

• 文件中的 .json格式的文件是阿里图标的数据格式文件，在vue中可以使用axios请求本地路径来获取到图标列表的返回值，效果图展示如下：

  axios.get('http://localhost:8080/static/iconfont.json')
        .then((res) => {
                  this.iconList = res.data.glyphs;
        }).catch(function (error) {
                      console.log(error)
  });