React的使用图片：通过symbol引用svg的组件化的使用
效果
Codepen：svg-in-react
可以通过名称快速选用图标。
原理
symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
普通项目中，一般引入svg是通过webpack进行打包引入。
import iconXXX from 'xxx.svg';
但这样琐碎而且不好写类型，容易出错。
而通过网站iconfont-阿里巴巴矢量图标库，生成包含svg合集的js并将其挂载到body，然后就可以通过svg的use属性一一选取里面的图标了。普通使用可以参考说明iconfont-阿里巴巴矢量图标库帮助中心，这里针对react进行了组件化封装和类型补全。
实现
封装组件
IconBase.tsx
import React from "react";
export type IconName = "like"|"star"|"share";
/** 图标的symbol引用的基础组件 */
export const IconBase = ({
name,
...p
}: {
name: IconName;
} & JSX.IntrinsicElements["svg"]) => {
return (
<svg className="icon-box" aria-hidden="true" {...p}>
<use xlinkHref={"#icon-" + name}></use>
</svg>
);
};
解释：
- IconName：对应引入的所有图标的名称，规定类型
- p：透传一些svg原本的属性设置
加入全局css
.icon-box{
width: 1em;
height: 1em;
/* vertical-align: -0.15em; */
fill: currentColor;
overflow: hidden;
display: block;
}
使用
<IconBase name="like"></IconBase>
解释：
- name：选取需要的图标的类型
总结
通过引入svg合集和组件化封装，图标的引入也非常好用。如果本文对你有帮助，欢迎点赞让更多的人看到。
