1. Use SVG as an image

Method:

import x from 'xx/xx.svg'
const xxx=() = >{// React function component, you know
    return (
    <img src={x}>)}Copy the code

Changing the color of the image is not very convenient, so you need to manually change the fill in SVG

2. Using SVG – Sprite – loader

    / / webpack. Config. Add js rules
    {
             test: /\.svg$/,
             use: [
               { loader: 'svg-sprite-loader'.options: {}}, {loader: 'svgo-loader'.options: {}}]},/ / use
     import x from 'xx/xx.svg'
     
     console.log(x)// Notice this step
     <svg>< SVG fill="">
         <use xlinkHref="#id">//id is the file name</svg>
    
Copy the code

What does this loader do?

Combine all the imported SVGS into one large SVG tag with the corresponding SVG Symbols tag inside

Why do you have to console x? (Import)

tree Shaking

The code analysis doesn’t use this x, so it shakes it off the tree.

Ps :(so use require)