ant-design-vue/components/icon/index.js

import classNames from 'classnames'
import * as allIcons from '@ant-design/icons/lib/dist'
import VueIcon from '@ant-design/icons-vue'
import createFromIconfontCN from './IconFont'
import {
  svgBaseProps, withThemeSuffix,
  removeTypeTheme, getThemeFromTypeName,
  alias,
} from './utils'
import warning from '../_util/warning'
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'
import { filterEmpty } from '../_util/props-util'

// Initial setting
VueIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]))
setTwoToneColor('#1890ff')
const defaultTheme = 'outlined'
let dangerousTheme

// export interface CustomIconComponentProps {
//   width: string | number;
//   height: string | number;
//   fill: string;
//   viewBox?: string;
//   className?: string;
//   style?: React.CSSProperties;
//   ['aria-hidden']?: string;
// }

// export type ThemeType = 'filled' | 'outlined' | 'twoTone';

// export interface IconProps {
//   type?: string;
//   className?: string;
//   theme?: ThemeType;
//   title?: string;
//   onClick?: React.MouseEventHandler<HTMLElement>;
//   component?: React.ComponentType<CustomIconComponentProps>;
//   twoToneColor?: string;
//   viewBox?: string;
//   spin?: boolean;
//   style?: React.CSSProperties;
//   prefixCls?: string;
// }

// export interface IconComponent<P> extends React.SFC<P> {
//   createFromIconfontCN: typeof createFromIconfontCN;
//   getTwoToneColor: typeof getTwoToneColor;
//   setTwoToneColor: typeof setTwoToneColor;
//   unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
//   unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
// }

const Icon = {
  functional: true,
  name: 'AIcon',
  render (h, context) {
    const { props, slots, listeners } = context
    const {
      // affect inner <svg>...</svg>
      type,
      component: Component,
      viewBox,
      spin,
      // other
      theme, // default to outlined
      twoToneColor,
    } = props
    const slotsMap = slots()
    let children = filterEmpty(slotsMap.default)
    children = children.length === 0 ? undefined : children
    warning(
      Boolean(type || Component || children),
      'Icon should have `type` prop or `component` prop or `children`.',
    )

    const classString = classNames({
      [`anticon`]: true,
      [`anticon-${type}`]: !!type,
    })

    const svgClassString = classNames({
      [`anticon-spin`]: !!spin || type === 'loading',
    })

    let innerNode

    // component > children > type
    if (Component) {
      const innerSvgProps = {
        attrs: {
          ...svgBaseProps,
          viewBox,
        },
        class: svgClassString,
      }
      if (!viewBox) {
        delete innerSvgProps.attrs.viewBox
      }

      innerNode = (
        <Component {...innerSvgProps} >
          {children}
        </Component>
      )
    }
    if (children) {
      warning(
        Boolean(viewBox) || (
          children.length === 1 &&
          children[0].tag === 'use'
        ),
        'Make sure that you provide correct `viewBox`' +
          ' prop (default `0 0 1024 1024`) to the icon.',
      )
      const innerSvgProps = {
        attrs: {
          ...svgBaseProps,
        },
        class: svgClassString,
      }
      innerNode = (
        <svg {...innerSvgProps} viewBox={viewBox}>
          {children}
        </svg>
      )
    }

    if (typeof type === 'string') {
      let computedType = type
      if (theme) {
        const themeInName = getThemeFromTypeName(type)
        warning(!themeInName || theme === themeInName,
          `The icon name '${type}' already specify a theme '${themeInName}',` +
            ` the 'theme' prop '${theme}' will be ignored.`)
      }
      computedType = withThemeSuffix(
        removeTypeTheme(alias(type)),
        dangerousTheme || theme || defaultTheme,
      )
      innerNode = (
        <VueIcon
          class={svgClassString}
          type={computedType}
          primaryColor={twoToneColor}
        />
      )
    }

    return (
      <i {...{ on: listeners }} class={classString}>
        {innerNode}
      </i>
    )
  },
}

Icon.createFromIconfontCN = createFromIconfontCN
Icon.getTwoToneColor = getTwoToneColor
Icon.setTwoToneColor = setTwoToneColor

/* istanbul ignore next */
Icon.install = function (Vue) {
  Vue.component(Icon.name, Icon)
}

export default Icon