svg颜色部分的处理
我们期望的用法是这样的：
<Icon name="account" color="red" size={
[50,50]}/>
或者 size={
50} 这样的写法
所以需要三个参数：
- 名称（name）
- 颜色（color）
- 尺寸（size）
经过上一篇的步骤，可以看到name这个需求已经实现了。
size的实现比较简单，就不做太多赘述了（后面的代码中也体现了处理size的过程），直接在svg上添加属性就可以了，举个简单的例子：
return (
<svg
width={
200} // 把这里换成变量就可以了，或者将样式统一放在一个对象里，然后用展开符也行
height={
200}
aria-hidden="true"
>
<use xlinkHref={
iconName} />
</svg>
)
关于颜色的处理上，有两种不同的需求：
一是直接去除原来svg自带的颜色，所有的颜色都由用户重新设置（或有一个默认颜色）；
二是只有在用户传了颜色这个属性时才使用使用自定义的颜色，否则保留原来svg的颜色；（这个也是我的需求）
针对这两种不同的需求，处理方案是不同的（仅是在使用了svg-sprite-loader的情况下）。第一种需求实现起来比较简单，第二种比较麻烦，下面分别讨论（有些情况我没有实践，所以只给了思路或参考）。
（一）去除原来svg的颜色
有几种思路：
1. 直接去掉原来svg图片中fill的色值；
2. 通过css设置currentColor迂回覆盖原来的颜色；
直接去掉原来fill的色值
可以用一些插件（比如svgo-loader）或者自己写一些脚本处理。
安装svgo-loader
GitHub：svgo-loader
SVGO 将 SVG-as-XML 数据转换为 SVG-as-JS AST 表示形式。然后在所有AST数据项上运行并执行一些操作，最后，SVGO 再将 AST 转换回 SVG-as-XML 数据字符串。
SVGO 是 svg 优化器，包含很多插件。它可以删除和修改SVG元素，折叠内容，移动属性等等。
--------摘自《使用svg-sprite-loader优化Icon》
主要是在配置文件 webpack.config.js 里加入自动消除掉 fill ，具体代码如下（来自掘金作者moonwanger）：
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader', options: {
} },
{
loader: 'svgo-loader', options: {
plugins:[
// 加载时删除svg默认fill填充色
{
removeAttrs:{
attrs: 'fill'}}
]
}}
]
},
通过css设置currentColor
只需要新建一个样式文件（比如 icon.less ），写入下面的css；再将这个样式文件引入之前写好的通用组件 icon.js 。在 icon.js 中，为 svg 标签加上 color 属性就可以了。
g[fill] {
fill: currentColor;
fill-opacity: 1;
}
g[stroke] {
stroke: currentColor;
stroke-opacity: 1;
}
path[fill] {
fill: currentColor;
fill-opacity: 1;
}
path[stroke] {
stroke: currentColor;
stroke-opacity: 1;
}
原理很简单，本质上就是把svg文件中的 g 标签或者 path 标签中控制颜色的属性给改了。
（二）保留原来svg的颜色
有几种思路：
1. 动态引入不同的css文件，类似切换网站不同主题的实现方式；（不过这一种我没有成功）
2. 使用js选择器根据 id 选中对应的标签，当用户传入color属性时给标签增加样式；
第二种方法是我在尝试几个方法失败后才最后采用的，思路很简单：通过分析使用了 svg-sprite-loader 之后的HTML页面可以发现，每一个svg图片对应的symbol id是不一样的；这个symbol标签的孩子就是svg图片的path，其中的 fill 属性就控制了这个标签的颜色。这样我们就可以用 document.getElementById() 选中这个 symbol 标签；之后通过 children 来得到它的子元素，进而控制 path 中的 fill 属性。这样就实现了当用户不传入color时，
我项目中的目录结构是这样的：
- icons
- svg 这个文件夹用来放所有的svg图片
- src
- app.js
Icons.js:
import React, {
useMemo, useState, useEffect } from 'react'
const Icon = ({
name,size,color}) => {
console.log(name,size,color)
const [svgModule, setSvgModule] = useState();
const [svgSize, setSvgSize] = useState({
width: 30,
height:30
});
// 允许自定义颜色
const setColor = () => {
let elem = document.getElementById(`${
name}`)
if(elem) {
let children = document.getElementById(`${
name}`).children
for(let i=0;i<children.length;i++) {
// foreach报错
children[i].style = `fill: ${
color}`; // 这里不能用with语句，严格模式不支持with
}
}
}
// 允许自定义尺寸
const setSize = () => {
if(!size){
setSvgSize({
width:30,height:30})
return
}
typeof size === "number" || "string" ?
setSvgSize({
width:size,height:size}) :
(size.length && size.length === 1 ?
setSvgSize({
width:size[0],height:size[0]}):
setSvgSize({
width:size[0],height:size[1]})
)
}
// 根据name拿到svg路径
const getSvg = async () => {
console.log("getSvg")
const svg = await import(`../../icons/svg/${
name}.svg`)
setSvgModule(svg)
}
const iconName = useMemo(() => {
setColor() // 保证页面刷新时不会因为找不到id为name的标签而报错
if (svgModule && svgModule.default) {
return `#${
svgModule.default.id}`
}
}, [svgModule])
useMemo(() => {
setSize()
}, [size])
useMemo( ()=>{
setColor()
},[color])
useEffect(() => {
getSvg()
}, [])
return (
<svg
{
...svgSize}
aria-hidden="true"
>
<use xlinkHref={
iconName} />
</svg>
)
}
export default Icon
使用时（app.js）传入color的效果:
import React from 'react';
import Icon from "./components/icons"
function App() {
return (
<div>
<p>test2</p>
<Icon name="account" size="200" color="pink"/>
<Icon name="pwd" color="green"/>
</div>
);
}
export default App;
不传入color的效果：
<div>
<p>test2</p>
<Icon name="account" size="200"/>
<Icon name="pwd"/>
</div>
适配
之前我用来测试的svg图基本都是从iconfont上下载的，结构比较统一，比如account.svg这个图片的结构中只有 path 这一种标签：
但是项目中有时候设计师提供的一些svg图片层级和标签比较多（比如有rect、g等多种标签），颜色属性不确定在哪个标签的 fill 里，像上面那样很有可能没法更改svg图片的颜色，所以最好遍历每一个标签，于是又做了以下处理保证每一层都遍历到：
const setChildColor = (elem) => {
const {
children} = elem
if(children) {
for(let i=0;i<children.length;i++) {
children[i].style = `fill:${
color}`
if(children[i].children) {
setChildColor(children[i])
}
}
}
}
// 允许自定义颜色
const setColor = () => {
let elem = document.getElementById(`${
name}`)
if(elem) {
setChildColor(elem)
}
}