vue3按需引入Ant Design icon

目录

1.使用Ant Design图表库中的图标

1.1安装

1.2修改文档版本

1.3 使用

2.使用iconfont中的图标

---

1.使用Ant Design图表库中的图标

1.1安装

npm install --save @ant-design/icons-vue

1.2修改文档版本

vue3项目使用2.x或3.x。

1.3 使用

（1）点击复制代码

（2）将复制的代码粘贴在你要使用的地方

 （3）在script中引入

import {
  UserOutlined
} from '@ant-design/icons-vue';

 （4）若使用了setup语法糖即到此结束，没有使用则需要在componets中注册组件。

           setup语法糖即：<script setup> 将setup写入script标签内

export default defineComponent({
  components: {
    UserOutlined
  },
});

2.使用iconfont中的图标

（1）在script部分添加如下代码：

import { createFromIconfontCN } from '@ant-design/icons-vue';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2976736_xaf78g1r4y.js', //这是你自己图标的地址，后面会讲从哪复制
});

（2）打开iconfont,选择你所需的图片，加入小购物车。

（3）点击右上角购物车，将图标添加至项目，若没有项目就新建一个

  

 （4）①点击symbol后，点击复制②代码，替换上面提到的scriptUrl，再点击③复制代码

 （5）将复制的③代码写入type中

<a-menu-item key="3">
    <icon-font type="icon-menu-s"/>
    <span>nav 3</span>
</a-menu-item>

 （6）若使用了setup语法糖则到此结束，若没有还需在components中写入IconFont

export default {
  components: {
    IconFont,
  },
};