react-组件-Icon

1. 基本使用

1.1. 在 public 下 index.html 中引入该文件

图标库

<!-- 字体图标地址： -->
<!-- 拷贝项目下面生成的symbol代码：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js -->
<script src="xxxxxxxxxxxx.js"></script>

1.2. 在 index.scss 中加入通用 css 代码

index.scss

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

1.3. 挑选相应图标并获取类名

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

2. 封装 Icon 组件

Icon/index.tsx

// 组件 props 的类型
type Props = {
  // icon 的名称
  type: string
  // icon 的自定义样式
  className?: string
  // 点击事件
  onClick?: () => void
}

const Icon = ({ type, className, onClick }: Props) => {
  return (
    <svg className={'icon ' + className} aria-hidden='true' onClick={onClick}>
      <use xlinkHref={`#${type}`}></use>
    </svg>
  )
}

export default Icon

参数	描述	类型	是否可选
type	图标的名称	string	否
className	图标的自定义样式	string	是
onClick	自定义点击事件	()=>void	是