How to use @ant-design/icons-react - 8 common examples

import * as allIcons from '@ant-design/icons/lib/dist';
import ReactIcon from '@ant-design/icons-react';
import createFromIconfontCN from './IconFont';
import {
  svgBaseProps,
  withThemeSuffix,
  removeTypeTheme,
  getThemeFromTypeName,
  alias,
} from './utils';
import warning from '../_util/warning';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';

// Initial setting
ReactIcon.add(...Object.keys(allIcons).map(key => (allIcons as any)[key]));
setTwoToneColor('#1890ff');
let defaultTheme: ThemeType = 'outlined';
let dangerousTheme: ThemeType | undefined;

function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
  warning(
    false,
    'Icon',
    `You are using the unstable method 'Icon.unstable_ChangeThemeOfAllIconsDangerously', ` +
      `make sure that all the icons with theme '${theme}' display correctly.`,
  );
  dangerousTheme = theme;
}

function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
  warning(

static load(allIcons) {
    // 注册所有图标     
    ReactIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]));
    // 还原get函数    
    ReactIcon.get = originalGetIcon;
    // 通过强制刷新来，显示异步加载的图标    
    this.instances.forEach((instance) => instance.forceUpdate());
    // 移除所有队列     
    this.instances.length = 0;
  }
  constructor(props) {

static load(allIcons) {
    // 注册所有图标     
    ReactIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]));
    // 还原get函数    
    ReactIcon.get = originalGetIcon;
    // 通过强制刷新来，显示异步加载的图标    
    this.instances.forEach((instance) => instance.forceUpdate());
    // 移除所有队列     
    this.instances.length = 0;
  }
  constructor(props) {

import React from 'react'; import PropTypes from 'prop-types';
import ReactIcon from '@ant-design/icons-react';
import { generate } from '@ant-design/icons-react/es/utils';

// 原始获取图标函数 
const originalGetIcon = ReactIcon.get.bind(ReactIcon);
// 覆盖get函数，在图标未加载前，返回一个渲染AutoReloadIcon来控制自动刷新 
ReactIcon.get = function (key) {
  const target = originalGetIcon(key);
  if (target) {
    return target;
  }
  return {
    icon: (primaryColor, secondaryColor) => {
      return {
        tag: function AutoReloadIconWrapper(props) {
          return (

export function getTwoToneColor(): string {
  const colors = ReactIcon.getTwoToneColors();
  return colors.primaryColor;
}

export function setTwoToneColor(primaryColor: string): void {
  return ReactIcon.setTwoToneColors({
    primaryColor,
  });
}

render() {
    const { originalType, rootProps } = this.props;
    const target = this.getIcon(originalType);
    if (target) {
      return React.Children.only(generate(target.icon, 'svg-' + target.name, rootProps));
    }
    else {
      return <svg></svg>;
    }
  }
}

import * as React from 'react';
import styles from './index.less';
import { Alibaba, Dashboard, DashboardFill, Twitter } from '@ant-design/icons/esm';
import AntdIcon from '@ant-design/icons-react/esm';

AntdIcon.add(Alibaba, Dashboard, DashboardFill);

export default class IndexPage extends React.Component {
  render() {
    return (
      <div>
        
        
        
        <div>
          <span style="{{">
            64px ABC
          </span>
          
          <p>SVG element could not align to text.<br>You should set <code>vertical-align: -.125em</code></p>
        </div>
      </div>