React 基本配置(五）配置svg图片

config-overrides.js 中配置

1.下载 customize-cra、react-app-rewired

npm install customize-cra react-app-rewired

2.通过 customize-cra引入 addWebpackModuleRule

在这里插入代码片
const { override,addWebpackModuleRule} = require("customize-cra");
module.exports={
  webpack:function(conifg,env)
  {
      override(
      // svg-sprite-loader
      addWebpackModuleRule({
        test: /\.svg$/,
        include: [resolve("src/assets")],
        use: [
          {
            loader: "svg-sprite-loader",
            options: { symbolId: "icon-[name]" },
          },
        ],
      })
    )(config,env)
    return config
  }
}

3.安装svg-sprite-loader

npm install svg-sprite-loader

4.创建icons组件

在src目录在创建components目录,在该目录下创建svgIcons目录，在该目录下创建svgConfig.js、
index.jsx、svg.module.css三个文件
注意:src 下的index.js入口文件中需要引入svgConfig.js文件
import "@/components/svgIcons/svgConfig.js";
svgConfig.js代码如下:

//把svg文件放在assets目录下的svg文件夹里
const req = require.context("@/assets/svg", false, /\.svg$/);
const requireAll = (requireContext) =>
requireContext.keys().map(requireContext);
requireAll(req);

index.jsx文件代码如下：

import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.module.css";
export default class index extends Component {
static propTypes = {
 iconClass: PropTypes.string.isRequired,
 className: PropTypes.string,
};
render() {
 const { iconClass, className } = this.props;
 const styleExternalIcon = {
   mask: `url(${iconClass}) no-repeat 50% 50%`,
   WebkitMask: `url(${iconClass}) no-repeat 50% 50%`,
 };
 const isExternal = (path) => /^(https?:|mailto:|tel:)/.test(path);
 const svgClass = className ? "svg-icon " + className : "svg-icon";
 const iconName = `#icon-${iconClass}`;
 return (
   <>
     {isExternal(iconClass) ? (
       <div
         style={styleExternalIcon}
         className={`svg-external-icon ${svgClass}`}
       />
     ) : (
       <svg className={svgClass} aria-hidden="true">
         <use xlinkHref={iconName} />
       </svg>
     )}
   </>
 );
}
}

index.module.css文件代码如下：

.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}

.svg-external-icon {
 background-color: currentColor;
 mask-size: cover !important;
 display: inline-block;
}

组件的使用如下：

<SvgIcon iconClass="homePage-cpdw" className="svgPic" />``