Icon 图标

IconFont 图标库地址

利用 iconfont 下载下来的 js，以 symbol 形式引用，因此会根据当前字体颜色和大小改变 icon 的颜色和大小

<Icon type={IconType.LOADING} style={{ fontSize: 46, color: 'black' }} />
<Icon type={IconType.LOADING} style={{ fontSize: 30, color: 'red' }} />

所有图标

loading

search

close

delete

arrow

arrow-2

datepicker

所有图标

收起源代码

import { Icon, IconType } from '@dance-ui/ui'
import React from 'react'

export default () => {
  const renderAllIcon = () => {
    const icons: IconType[] = []
    for (const key in IconType) {
      const name = (IconType as any)[key]
      icons.push(name)
    }
    return (
      <>
        {icons.map((icon) => (
          <div key={icon} className="flex flex-col items-center">
            <Icon type={icon} style={{ fontSize: 46, color: 'black' }} />
            <div>{icon}</div>
          </div>
        ))}
      </>
    )
  }
  return renderAllIcon()
}

组件源码

组件源码

import classNames from 'classnames'
import React, { useCallback } from 'react'
import { useMount } from 'react-use'
import { IconType } from './type'

export type IconProps = {
  /** 图标唯一类型 */
  type: IconType
  /** 图标点击事件 */
  onClick?: (e: React.MouseEvent<SVGElement>) => void
  /** 图标显示与否 */
  show?: boolean
  /** 图标链接 */
  href?: string
  /** 组件额外的 CSS className */
  className?: string
  /** 组件额外的 CSS style */
  style?: React.CSSProperties
  /** 自定义图标来源 若自定义则不按照图标类型来 */
  iconUrl?: string
}

const IconFont: React.FunctionComponent<IconProps> = ({ type, style, className, onClick }) => {
  return (
    <svg onClick={onClick} className={classNames(`dd__icon`, className)} style={style} aria-hidden="true">
      <use xlinkHref={`#icon-${type}`}></use>
    </svg>
  )
}
const Icon = ({ show, href, className, iconUrl, onClick, ...attr }: IconProps): JSX.Element => {
  const _onClick = useCallback(
    (e: React.MouseEvent<SVGElement>): void => {
      onClick?.(e)
      href && window?.open(href, '_blank')
    },
    [href, onClick],
  )
  useMount(() => {
    import('./script/iconfont.js' as any)
  })
  return (
    <>
      {show && (
        <IconFont onClick={_onClick} className={classNames({ 'cursor-pointer': href || onClick }, className)} {...attr} />
      )}
    </>
  )
}
Icon.defaultProps = {
  show: true,
}
export default Icon