备战面试！我在TypeScript中封装了一个Icon组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

1、首先进入在iconfont官网中，把项目需要的图标加入到购物车 点击购物车，点击添加至项目

2、添加到对应项目后，这里选择Symbol，因为可以不用下载，直接引入！然后点击更新代码、点击复制代码

3、在项目的public 下 index.html 中引入我们刚复制的代码

<!-- 字体图标地址： -->
<script src="//at.alicdn.com/t/font_3300682_bvrtceqxdj.js"></script>

4、在 index.scss 中添加通过 css 代码，给图标设置统一大小样式

.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

5、在任意组件中，使用图标，其中xlinkHref后面的就是我们添加的图标

<svg className="icon" aria-hidden="true">
{/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
<use xlinkHref="#iconbtn_like_sel"></use>
</svg>
<svg className="icon" aria-hidden="true">
{/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
<use xlinkHref="#xxxxxxxx"></use>
</svg>
<svg className="icon" aria-hidden="true">
{/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
<use xlinkHref="#yyyyyyyy"></use>
</svg>

点击复制代码就可以拿到对应小图标的代码，放在xlinkHref后面就可以

注意use xlinkHref="#iconbtn_like_sel">，加了_sel就是选中高亮的图标

接下来我们封装Icon组件

 //示例，我们需要封装成一个这样的组件
<Icon className="someClass" type="iconbtn_like_sel" onClick={()=>{console.log('test')}}/>

1、在 components 目录中，创建 Icon/index.tsx 文件

2、创建 Icon 组件，并指定 props 类型

// 组件 props 的类型
type Props = {
// icon 的类型
type: string //其中type是必传的，不然显示不出来
// icon 的自定义样式
className?: string
// 点击事件
onClick?: () => void
}
const Icon = ({ type, className, onClick }: Props) => {
return (
<svg
  className={'icon ' + className} //'icon '这里有空格，不然类名不生效
  aria-hidden="true"
  onClick={onClick}
>
  <use xlinkHref={`#${type}`}></use>
</svg>
)
}
export default Icon

需要的组件导入Icon，传入参数就可以复用了