《react里使用svg-sprite-loader》

aq82041
3,407 阅读2分钟

在react项目里使用svg图标，最原始的方法是把图标当作图片使用：

  1. 去阿里下载想要的图标，要svg下载。复制到项目里。在要使用的文件里导入，然后以img标签的形式使用：
import x from "icons/chart.svg";
import y from "icons/money.svg";
import z from "icons/label.svg";

console.log(x);
console.log(y);
console.log(z);
<img src={x} alt=""/>

import 的变量x,y,z是经过处理的图片路径，把它当作src属性。

/static/media/chart.69f7407d.svg
/static/media/money.275cd465.svg
/static/media/label.8899d0dc.svg

这些就是log出来的。

但是用img标签的形式的使用有一些限制。比如图标的颜色很难改变。

所以我们使用svg-sprite-loader

使用svg-sprite-loader要在webpack.config.js里配置。但是我们用create-react-app搭建起来的项目里没有webpack 的配置文件。

使用yarn eject命令，可以把配置文件弄出来。运行后，发现项目下多了两个目录，其中就有webpack.config.js，我们就可以修改它进行配置。按照官网配置即可。

{
              test: /\.svg$/,
              use: [
                { loader: 'svg-sprite-loader', options: {} },
                { loader: 'svgo-loader', options: {} },
              ]
},

官网上options里有... ，是错误的写法，直接留空即可。

然后下载svg-sprite-loader和 svgo-loader。

yarn add --dev svg-sprite-loader
yarn add --dev svgo-loader

一般和webpack或typescript相关的用--dev（约定俗成）

官网上还有一个'svg-transform-loader',但是它是用来以图片形式使用的，我们用不到，就不用了。

yarn eject 后报错：使用yarn eject把配置文件弄出来并且修改，再次yarn start会报错，说找不到某一个模块。那就yarn add下载该模块即可。

或者万能排错语句：把node_modules全删除，重新安装

rm -rf node_modules
 yarn install

该配置的配置，该下载的下载，之后就可以使用了。

比如在Nav.tsx里：

import x from "icons/chart.svg";
import y from "icons/label.svg";
import z from "icons/money.svg";

console.log(x);
console.log(y);
console.log(z);

<svg fill='red'>
   <use xlinkHref='#chart'/>
</svg>

id就是文件名。svg上还可以直接加fill属性，颜色。

引入的x,y,z如果不使用，就是如果不打印，页面上的图标就看不到了。必须用一下图标才能生效。这是因为treeshaking，意思是，如果你用不上一个东西，我就把他从树上摇下来。react发现你引入了x，但是没使用，就会把它删了。

那我怎么能引入也不需要打印呢？

treeshaking不适用于require:根据次，使用require导入

require("icons/chart.svg");
require("icons/label.svg");
require("icons/money.svg");

可以避免被删除

  1. 封装Icon组件

现在每次使用svg都要写三句代码，还要require引入。避免重复，把它封装成组件。

//Icon.tsx
import React from 'react';

//require("icons/chart.svg");
//require("icons/label.svg");
//require("icons/money.svg");
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('../icons', true, /\.svg$/));} catch (error) {console.log(error);}
type Props={
    name:string
}
function Icon(props:Props){
    return (
        <svg className='icon'>
            <use xlinkHref={'#'+props.name}/>
        </svg>
    )
}
export default Icon

把require导入也放进来。但是如果有100个svg，就要写100次reuqire。所以我们选择直接导入一个目录，这个目录里存放所有的svg。就是importAll

但是有报错，说找不到__WebpackModuleApi，这是因为在ts里不支持这个的问题。去谷歌搜索解决方案。安装：yarn add --dev @types/webpack-env就可以解决。

其他组件想使用Icon，一句话引入即可<Icon name='chart'/> name属性是文件名。

Icon如果想改变颜色，可以直接在css里用fill改变：

.icon{
            fill:rgb(140, 177, 253);
          }

可是有一些svg图标是自带颜色的，在它们的文件里会通过fill属性指定颜色。如果是这种情况，就改不了颜色了。我们可以选择手动去它们的svg文件里删除fill属性，但是如果有很多图标，一个个删除太慢了。

svgo-loader有一个功能，可以删除fill属性，只需要把需要的语句添加到配置文件的svgo-loader后边的选项options里边就可以。

svgo就是svg optimizer 优化器的意思。

{ loader: 'svgo-loader', options: {
                  plugins:[
                    {removeAttrs: {attrs:'fill'}}
                  ]
                  } },

svgo-loader还可以配置什么，更多的可以参考官网：svgo配置项列表

avatar
文章
阅读
粉丝