React使用本地svg图片

安装依赖

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

全局引入SVG的所有图片，代码如下：

svg目录

	src
	└──assets
	  └──icons
	    ├──svg
		┊  ├──logo.svg #本地svg文件
		┊  └──en.svg
		└──index.js

index.js代码：

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
//一个 webpack 的 api ，通过该函数可以获取一个上下文，
//从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。

//在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入

在index.tsx中引入（相当于项目主入口文件）

import '@/assets/icons'

webpack配置

生成webpack.config.js配置文件

yarn eject
#npm run eject

修改webpack.config.js配置文件

//替换配置
{
  test: /\.svg$/,
  use: [
    {
      loader: require.resolve('@svgr/webpack'),
      options: {
        prettier: false,
        svgo: false,
        svgoConfig: {
          plugins: [{ removeViewBox: false }],
        },
        titleProp: true,
        ref: true,
      },
    },
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'static/media/[name].[hash].[ext]',
      },
    },
  ],
  issuer: {
    and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
  },
}

//替换为
{
  test: /\.svg$/,
  include: path.resolve(__dirname, '../src/assets/icons'), 
  use:  [
    { loader: 'svg-sprite-loader', options: {} },
    // { loader: 'svgo-loader', options: {symbolId: "icon-[name]"} },
  ]
},

封装组件，添加参数与事件

import React, {useMemo, useEffect } from "react";
interface SvgProps {
  name: string;  // 图片名称
  className?: string; //class 名称
  rotate?: number; 
  size?: string | number;
  onclick?: any; // onClick事件
}
/** 自定义SVG图片组件 */
const SvgIcon= (props: SvgProps) => {
  let {
    name,
    className,
    rotate,
    size,
    onclick,
  } = props;
  const setData = () => {
    name = "";
    className = "";
    rotate = 0;
    size = 24;
    onclick = new Function
  }
  useEffect(() => { setData(), [] }) // 初始化数据，在渲染的时候初始化一次数据，那么第二个参数必须传空数组
  const svgclass = useMemo(() => {
    if (className) {
      return 'svg-icon '+ className.trim()
    }
    return "svg-icon"
  }, [className])
  const svgStyle = useMemo(() => {
    return {
      transform: 'rotate(' + rotate  + 'deg)',
      fontSize: size  + 'px'
    }
  }, [rotate])
  return (
    <div className="b-k flex-display flex-ai-center ">
      <svg className={svgclass}
        aria-hidden="true"
        style={svgStyle}
        onClick={ onclick }
        >
      <use xlinkHref={'#'+ name}></use>
    </svg>
    </div>
  )
}
export default SvgIcon

使用

import SvgIcon from "../../components/SvgIcon"
export default ()=>{
  return (
    <div>
      <SvgIcon name="logo"></SvgIcon>
    </div>
  )
}

---