怎么使用ant design vue中的图标?
时间: 2023-10-25 07:06:51 浏览: 36
要在 ant design vue 中使用图标,需要先安装 @ant-design/icons-vue 包。可以通过以下命令进行安装:
```
npm install @ant-design/icons-vue --save
```
安装完成后,在 main.js 中进行如下配置:
```js
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { createFromIconfontCN } from '@ant-design/icons-vue';
const app = createApp(App);
app.use(Antd);
// 自定义图标
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1234567_abcdefg.js',
});
app.component('icon-font', IconFont);
app.mount('#app');
```
其中,`createFromIconfontCN` 方法用于创建自定义图标。在 `scriptUrl` 参数中,需要填写从阿里巴巴图标库中获取的图标链接。
创建完成后,在组件中即可使用自定义图标:
```html
<icon-font type="iconfont-name" />
```
其中,`iconfont-name` 为阿里巴巴图标库中的图标名称。