antd-icons-vue
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) |
Dependencies
Dependencies
@ant-design/icons: ^2.0.0@types/jest: ^23.3.1@types/node: ^10.5.5@types/vue: ^2.0.0@vue/server-test-utils: 1.0.0-beta.16@vue/test-utils: 1.0.0-beta.16babel-core: ^6.26.3cross-env: ^5.2.0jest: ^23.4.2jest-serializer-vue: ^2.0.2vc-tools: ^1.0.0vue: >=2.5.0vue-jest: ^2.5.0vue-template-compiler: >=2.5.0