今天想封装一个 Icon 图标组件

站长

2023年01月09日 23:08 · 阅读数 13

一、前言

瞧着 Ant Design 里面字体图标的使用挺有意思，咱也来一个。

关于 React 中如何使用阿里巴巴字体图标，我在之前的文章中有写过，不清楚的可以查看。

本文则是关于如何封装阿里巴巴字体图标组件，以便在 react+ts 项目中，可以像导入组件一样灵活自如地使用第三方字体图标，并赋予它额外的意义，我们一起来看看吧。

二、封装步骤

第一步：在官网搜索自己喜欢的图标，添加到我的项目

今天想封装一个 Icon 图标组件

第二步：将在线链接放到 Public/index.html 中用 script 标签链入

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

今天想封装一个 Icon 图标组件

第三步：任意一个组件或html，测试字体图标里是否显示在页面

法1：tsx 文件的写法

import React from 'react'
const Test = () => {
    return <div>
        <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-car"></use>
        </svg>
    </div>
}
export default Test

法2：html 文件的写法

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

页面显示：汽车出来啦，就是红得有点渗人额

今天想封装一个 Icon 图标组件

第四步：封装 MyIcon 组件思路分析

1.目标：可以自定义样式、自由传 icon 的名字，最好还能点击

<MyIcon className="someClass" type="icon-car" onClick={()=>{console.log('test')}}/>

2.分析：如何实现这些功能

相信你已经猜到父传子了，父组件通过自定义属性传递，子组件通过 props 接收。完美！

第五步：创建 MyIcon 组件，并指定 props 类型

components/MyIcon/index.tsx 中：

// ◆ 组件 props 的类型
type Props = {
    // icon 的类型(必选)
    type: string
    // icon 的自定义样式(可选)
    className?: string
    // 点击事件(可选)
    onClick?: () => void
}
const MyIcon = ({ type, className, onClick }: Props) => {
    return (
        <svg
            className={'icon ' + className}
            aria-hidden="true"
            onClick={onClick}
        >
            <use xlinkHref={`#${type}`}></use>
        </svg>
    )
}
export default MyIcon

第六步：可以在任意组件为所欲为啦

1.自定义样式

index.module.scss

:root{
    :global{
        .icon {
            width: 1em; 
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
          }
        .my-icon{
            color: green;
        }
    }
}

2.使用 MyIcon 组件

Test.tsx

import MyIcon from '../components/MyIcon'
import styles from './index.module.scss'
const Test = () => {
    return <div className={styles.root}>
        <MyIcon className='my-icon' type='icon-people'></MyIcon>
        <MyIcon type='icon-cart'></MyIcon>
        <MyIcon type='icon-Cart' onClick={() => console.log('test')}></MyIcon>
    </div>
}
export default Test

3.页面显示：人真的变绿啦

今天想封装一个 Icon 图标组件

三、小结

封装组件的思路：测试驱动开发。收官！