【前端】vuecli项目引入ant-design-vue并用ant-design-vue配置阿里巴巴矢量图标库

1、导入并配置ant-design-vue

官网说的十分清楚，我直接copy官网的操作

npm i --save ant-design-vue

在main.js中完整引入 ant-design-vue

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

2、阿里巴巴矢量图标库创建项目

3、全局配置阿里巴巴矢量图标（也可以局部vue文件使用，单独导入component）

在main.js中

//全局引入阿里巴巴矢量图标
import Icon from 'ant-design-vue/es/icon/index'
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2253742_i247dt9fum.js' // 在 iconfont.cn 上生成
});
Vue.component('MyIcon', MyIcon);

4、使用阿里巴巴矢量图标

直接使用就行了

<my-icon style="color:#686868;font-size:58px;"type="icon-jiantou2"/>