current position:Home>React next configures SVG loader and supports SVG configurability

React next configures SVG loader and supports SVG configurability

2022-05-15 02:17:59Winding paths lead to seclusion~

1、 Download related loader, plug-in unit

yarn add svg-url-loader postcss-inline-svg --dev

2、 Start configuration

Created in the root directory postcss.config.js file , And write

module.exports = {
    
  plugins: {
    
    'postcss-inline-svg': {
    removeFill: false},
  },
}

modify next.config.js To configure

webpack(config) {
    
          config.module.rules.push({
    
            test: /\.svg/,
            use: [
              {
    
                loader: "svg-url-loader",
                options: {
    
                  // make all svg images to work in IE
                  iesafe: true,
                },
              },
            ],
          })
          return config;
        },

Add... In the corresponding position svg-url-loader To configure

other

svg-url-loader It's location support webpack When packing, you can introduce svg file
postcss-inline-svg The plug-in is to let postcss Support modification during development svg Properties of . removeFill: false It means not to delete the original svg Attribute fill, If this configuration is added , with fill Of svg You will not be able to reconfigure colors .

Official documents : Portal

copyright notice
author[Winding paths lead to seclusion~],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120523553711.html

Random recommended