React项目中webpack加载svg

一 webpack配置

安装loader

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

webpack.config.js文件配置

{
     test: /\.svg$/,
     use: [
      { loader: 'svg-sprite-loader', options: {} },
      { loader: 'svgo-loader', options: {
         // plugins:[
         //加载时删除svg默认fill填充色
          //   {removeAttrs:{attrs: 'fill'}}
           //  ]
      }}
     ]
    },

二 Icon组件

import React from "react"

//方法一 导入单个svg文件
require("icons/tag2.svg");
require("icons/chart.svg");
require("icons/money.svg");

// 方法二 直接将svg文件夹导入
let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('svg存放文件夹的路径', true, /\.svg$/));} catch (error) {console.log(error);}
// 方法三 直接在index.html中使用script标签引入iconfont.cn中所有svg的链接即可

//这里使用的typescript
type Props={
  name:String;
}

const Icon=(props:Props)=>{
  return (
    <svg className="icon">
      <use xlinkHref={'#'+props.name}/>
    </svg>
  )
}

export default Icon

三 使用

<Icon name="你的svg文件名"/>