react中使用svg

项目采用react-create-app生成，使用craco添加配置。

安装svg插件：

npm install svg-sprite-loader svgo-loader --dev

修改craco.config.js配置


const path = require('path');
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  webpack:{
    alias: {
      '@': resolve('src')
    },
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.module.rules[1].oneOf = [
          ...[
              {
                  test: /.svg$/,
                  // 存放svg的文件夹
                  include: resolve('./src/static/svg'),
                  use: [
                    { loader: 'svg-sprite-loader', options: {} },
                    { loader: 'svgo-loader', options: {symbolId: "icon-[name]"} },
                  ],
              },
          ],
          ...webpackConfig.module.rules[1].oneOf,
      ];
      return webpackConfig;
    },
  },
  devServer: {
    open: false,
  },
}

引入全局的svg图片，在svg文件夹下创建index.js文件，代码如下：

const req = require.context('./', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

封装svg组件SvgIcon.jsx

import React, { memo, useMemo } from 'react'
import PropTypes from 'prop-types'
// 导入创建的index.js文件
import '@/static/svg/index.js'

const index = memo((props) => {
    // name: svg文件名
    // className: 自定义的类名
    // svgClick:  点击的回调函数

  return (
      <svg className={className || 'svg-icon'}
        onClick={ svgClick }>
      <use xlinkHref={'#'+ name}></use>
    </svg>
  )
})

index.propTypes = {
  name: PropTypes.string,
  className: PropTypes.string,
  svgClick: PropTypes.func
}

export default index

在其他组件中使用

import SvgIcon from '@/components/svgIcon/index.jsx'

const index = memo(() => {
  const svgClick = ()  => {
    console.log('svgClick');
  }
  return (
    <div>
    <SvgIcon name="clear" className='form-icon' svgClick={e =>svgClick() } />
    </div>
  )
})

export default index