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) {
            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


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.

Random recommended