Ant Design Icons for Vue
Install
yarn add @ant-design/icons
yarn add @ant-design/icons-vue
Basic Usage
First, you should add the icons that you need into the library.
import Vue from 'vue'
import { AntDesignOutline, DashboardOutline, TwitterOutline } from '@ant-design/icons';
import AntdIcon from '@ant-design/icons-vue';
AntdIcon.add(AntDesignOutline, DashboardOutline);
Vue.use(AntdIcon)
After that, you can use antd icons in your Vue components as simply as this:
<antd-icon type="ant-design-o" />
<antd-icon type="dashboard-o" />
<antd-icon type={TwitterOutline} />
export interface IconDefinition {
name: string;
theme: ThemeType;
icon: ((primaryColor: string, secondaryColor: string) => AbstractNode) | AbstractNode;
}
Property |
Description |
Type |
Default |
type |
Type of ant design icon |
string | IconDefinition |
- |
style |
style properties of icon, like fontSize and color |
object | string |
- |
class |
class properties of icon |
object | string |
- |
Events
Events Name |
Description |
Arguments |
click |
set the handler to handle click event |
function(e) |