目录
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,
},
};