ant-design-vue/components/icon/index.en-US.md

4.3 KiB

API

Property Description Type Default
type Type of the ant design icon string -
style Style properties of icon, like fontSize and color CSSProperties -
theme Theme of the ant design icon 'filled' | 'outlined' | 'twoTone' 'outlined'
spin Rotate icon with animation boolean false
component The component used for the root node. This will override the type property. ComponentType<CustomIconComponentProps> -
twoToneColor Only support the two-tone icon. Specific the primary color. string (hex color) -

SVG icons

We introduced SVG icons in 1.2.0 version replacing font icons which brings benefits below:

  • Complete offline usage of icon, no dependency of CDN font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
  • Much more display accuracy in lower-level screens.
  • Support multiple colors for icon.
  • No need to change built-in icons with overriding styles by providing more props in component.

More discussion of SVG icon reference to #10353.

⚠️ About the extra bundle size brought by all SVG icons we imported in 1.2.0, we will provide new API to allow developers importing icons as your need, you can trace #12011 for further progress.

The properties theme, component and twoToneColor are added in 1.2.0. The best practice is to pass the property theme to every <Icon /> components.

<a-icon type="star" theme="filled" />

All the icons will render to <svg>. You can still set style and class for size and color of icons.

<a-icon type="message" :style="{ fontSize: '16px', color: '#08c' }" />

Set TwoTone Color

When using the two-tone icons, you can use the static methods Icon.getTwoToneColor() and Icon.setTwoToneColor(colorString) to spicify the primary color.

import { Icon } from 'ant-design-vue'

Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96

Custom Font Icon

We added a createFromIconfontCN function to help developer using their own icons deployed at iconfont.cn in a convenient way.

This method is specified for iconfont.cn.

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});

new Vue({
  el: '#app',
  template: '<my-icon type="icon-example" />',
  components: {
    'my-icon': MyIcon,
  }
})

It create a component that uses SVG sprites in essence.

The following options are available:

Property Description Type Default
scriptUrl The URL generated by iconfont.cn project. string -
extraCommonProps Define extra properties to the component { [key: string]: any } {}

The property scriptUrl should be set to import the SVG sprite symbols.

See iconfont.cn documents to learn about how to generate scriptUrl.

Custom SVG Icon

You can import SVG icon as an vue component by using vue cli 3 and vue-svg-loader. vue-svg-loader's options reference.

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};
import { Icon } from 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

new Vue({
  el: '#app',
  template: '<a-icon :component="MessageSvg" />',
  components: {
    'my-icon': MyIcon,
  }
})

The following properties are available for the component:

Property Description Type Default
width The width of the svg element string | number '1em'
height The height of the svg element string | number '1em'
fill Define the color used to paint the svg element string 'currentColor'
class The computed class name of the svg element string -
style The computed style of the svg element CSSProperties -