1. First download the required SVG and place it in the ICONS directory before committing

2.eject

yarn eject

3. Install SVG – loader

yarn add --dev svg-sprite-loader

yarn add --dev svgo-loader

4. Configuration webpack

Register svG-loader in oneOf:[] in webpack.config.js:

{
  test: /\.svg$/,
     use: [
       {loader: "svg-sprite-loader", options: {}},
       {loader: "svgo-loader", options: {}}
    ]
},
Copy the code

use

require('icons/one.svg')
<svg fill="red">
   <use xlinkHref="#one/>
</svg>
Copy the code
  • Note that to use require, ThreeShakingt automatically removes useless import imports (eg:import x from ‘ICONS /one.svg’ but x is not used by TSX) and ThreeShaking does not apply to require.

5. Mass introduction of SVG in TS

Yarn add - dev @ types/[email protected]

let importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
try {importAll(require.context('icons',true,/\.svg$/))} catch (e) {console.log(e)}
Copy the code