vue3按需引入Ant Design icon

最新推荐文章于 2025-09-24 23:15:27 发布

原创最新推荐文章于 2025-09-24 23:15:27 发布 · 4.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用AntDesign图表库中的图标和iconfont，包括安装、文档版本选择、代码示例及组件注册。同时涵盖了iconfont的图标获取、配置和在菜单中的应用。

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

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