自定义封装字体图标组件

前言

之前用一些组件库的时候，一直很好奇为什么只是用一个标签，设置一个类名，就可以实现显示对应的字体图标，这中间到底要做什么才能实现这样的效果。 于是为了搞清楚他到底做了什么，决定自己封装一个字体图标的组件，来实现同样的功能。 我们先来做一个测试用例。

// 我们想要的使用格式是这样的
<Icon
// 类名 - 使用者可以自己指定图标的样式，如颜色、大小等
className="someClass"
// 样式 - 需要展示的图标的款式
type="iconbtn_like_sel"
// 事件 - 点击事件之后，用户可以做一些操作
onClick={()=>{console.log('test')}} />

知道了都需要什么属性，就可以准备封装组件了。 首先，封装组件，也就是类似封装一个函数，所以我们可以定义一个函数。

function Icon (type, className, onClick) {
	return {
	// 判断 如果传了类名，就把类型加上去，如果没有传类名， 就显示默认的 icon 类名
		<svg onClick={onClick} className={className ? 'icon ' + className : 'icon'} aria-hidden="true">
		// 在这里使用，xlinkHref 就是要展示的图标样式
        	<use xlinkHref={'#' + type}></use>
  	   </svg>
	}
}
// 完成之后，再把 这个函数给暴露出去，就可以了。
export default Icon

这样就一个自定义的图标组件封装好了。