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

category	type	title	cover	coverDark
Components	General	Icon	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original

Semantic vector graphics. Before use icons, you need to install @ant-design/icons-vue package:

npm install --save @ant-design/icons-vue

API

Common Icon

Property	Description	Type	Default	Version
rotate	Rotate by n degrees (not working in IE9)	number	-
spin	Rotate icon with animation	boolean	false
style	Style properties of icon, like fontSize and color	CSSProperties	-
twoToneColor	Only supports the two-tone icon. Specify the primary color.	string (hex color)	-

We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';

<star-outlined />
<star-filled />
<star-two-tone two-tone-color="#eb2f96" />

Custom Icon

Property	Description	Type	Default	Version
component	The component used for the root node.	ComponentType<CustomIconComponentProps>	-
rotate	Rotate degrees (not working in IE9)	number	-
spin	Rotate icon with animation	boolean	false
style	Style properties of icon, like fontSize and color	CSSProperties	-

About SVG icons

We introduced SVG icons in version 1.2.0, replacing font icons. This has the following benefits:

• Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!)
• Much more display accuracy on lower-resolution screens
• The ability to choose icon color
• No need to change built-in icons with overriding styles by providing more props in component

More discussion of SVG icon reference at #10353.

⚠️ Given the extra bundle size caused by all SVG icons imported in 1.2.0, we will provide a new API to allow developers to import icons as needed, you can track #12011 for updates.

While you wait, you can use webpack plugin from the community to chunk the icon file.

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

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>

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

Set TwoTone Color

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

import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';

setTwoToneColor('#eb2f96');
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.

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});

It create a component that uses SVG sprites in essence.

The following options are available:

Property	Description	Type	Default
extraCommonProps	Define extra properties to the component	{ class, attrs, props, on, style }	{}
scriptUrl	The URL generated by iconfont.cn project.	string	-

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

vue cli 3

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 { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

export default defineComponent({
  setup() {
    return () => <Icon type={MessageSvg} />;
  },
});

Rsbuild

Rsbuild is a new generation of build tool, official website https://rsbuild.dev/
Create your own vue-svg-loader.js file, which allows you to customize and beautify SVG, and then configure it in rsbuild.config.ts

// vue-svg-loader.js
/* eslint-disable */
const { optimize } = require('svgo');
const { version } = require('vue');
const semverMajor = require('semver/functions/major');

module.exports = async function (svg) {
  const callback = this.async();

  try {
    ({ data: svg } = await optimize(svg, {
      path: this.resourcePath,
      js2svg: {
        indent: 2,
        pretty: true,
      },
      plugins: [
        'convertStyleToAttrs',
        'removeDoctype',
        'removeXMLProcInst',
        'removeComments',
        'removeMetadata',
        'removeTitle',
        'removeDesc',
        'removeStyleElement',
        'removeXMLNS',
        'removeXMLProcInst',
      ],
    }));
  } catch (error) {
    callback(error);
    return;
  }

  if (semverMajor(version) === 2) {
    svg = svg.replace('<svg', '<svg v-on="$listeners"');
  }

  callback(null, `<template>${svg}</template>`);
};

// rsbuild.config.ts
/* eslint-disable */
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.module.rule(CHAIN_ID.RULE.SVG).exclude.add(/\.svg$/);
    },
    rspack: {
      module: {
        rules: [
          {
            test: /\.svg$/,
            use: ['vue-loader', 'vue-svg-loader'],
          },
        ],
      },
      resolveLoader: {
        alias: {
          'vue-svg-loader': require('path').join(__dirname, './vue-svg-loader.js'),
        },
      },
    },
  },
});

The following properties are available for the component:

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