react中如何优雅的使用svg-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

react中优雅的使用svg的方法：首先安装【svg-sprite-loader】，并配置【/config/webpack.config.js】；然后在src文件夹下新建一个icons文件夹；最后设置SvgIcon组件。

本教程操作环境：windows7系统、React17版，该方法适用于所有品牌电脑。

相关学习推荐：react视频教程

react中优雅的使用svg的方法：

1、安装 svg-sprite-loader

1	`yarn add svg-sprite-loader --dev`

1	`npm i svg-sprite-loader -D`

2、配置 /config/webpack.config.js （yarn eject 后的配置）

注意：新添加的loader一定要放到file-loader之前

原因：webpack的loader执行是从后往前执行的

loader 里添加如下配置

{
     test: /\.(eot|woff2?|ttf|svg)$/,
     exclude: path.resolve(__dirname, "../src/icons"), //不处理指定svg的文件(所有使用的svg文件放到该文件夹下)
     use: [
       {
         loader: "url-loader",
         options: {
           name: "[name]-[hash:5].min.[ext]",
           limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
           outputPath: "font",
           publicPath: "font"
         }
       }
     ]
   },
   {
     test: /\.svg$/,
     loader: "svg-sprite-loader",
     include: path.resolve(__dirname, "../src/icons"), //只处理指定svg的文件(所有使用的svg文件放到该文件夹下)
     options: {
       symbolId: "icon-[name]" //symbolId和use使用的名称对应      <use xlinkHref={"#icon-" + iconClass} />
     }
   },

3、src 文件夹下新建一个 icons 文件夹

icons 文件夹下新建 svg 文件夹放 svg 文件

index.js 加载所有 svg 文件夹下 svg 文件

const requireAll = requireContext => requireContext.keys().map(requireContext);
const svgs = require.context("./svg", false, /\.svg$/);
requireAll(svgs);

然后一定要在react入口文件 src/index.js中导入src/icons/index.js

代码如下