基于 阿里巴巴 封装的图表组件

选择您想要的图标

加入购物车

如果没有项目可以优先创项目

图标使用

使用图标

复制代码

在html中写入

 <script src="//at.alicdn.com/t/font_3301507_jyu95p9mzq.js"></script>

在components/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

在需要使用的组件中导入并使用

Icon组件 type的值就是

import { Button } from 'antd'
import Icon from '@/components/Icon/index'
export default function Layout () {
  // eslint-disable-next-line space-infix-ops
  return <div>布局组件 <Button type="primary">Primary Button</Button><Icon type={'icon-gongwenbao'}></Icon></div>
}

实现效果