Svgr: Ignore SVG for use within background image URL

Created on 7 Feb 2020 · 3Comments · Source: gregberge/svgr

Hi all,

Was wondering if there was a way to ignore certain svg's or directories to not be converted into React components so they can be used elsewhere such as the background image of a div inside a CSS file using

background-image: url('../../mySvg.svg');

Source

1saf

👍2

Most helpful comment

Nevermind, it's clear now.

module: {
  rules: [
    { test: /\.(png|jpg|svg)$/i, issuer: /\.scss$/, use: "url-loader" },
    {
      test: /\.svg$/,
      exclude: /login/,
      issuer: /\.js$/,
      use: ["@svgr/webpack"],
    },
    {
      test: /\.scss$/i,
      use: ["style-loader", "css-loader", "sass-loader"],
    },
  ],
},

persianturtle on 23 Oct 2020

👍2

All 3 comments

https://webpack.js.org/configuration/module/#ruleissuer

gregberge on 16 Feb 2020

👍1

I have the same issue and it's not yet clear how webpack can help here. Can you please provide an example usage?

persianturtle on 23 Oct 2020

Nevermind, it's clear now.

module: {
  rules: [
    { test: /\.(png|jpg|svg)$/i, issuer: /\.scss$/, use: "url-loader" },
    {
      test: /\.svg$/,
      exclude: /login/,
      issuer: /\.js$/,
      use: ["@svgr/webpack"],
    },
    {
      test: /\.scss$/i,
      use: ["style-loader", "css-loader", "sass-loader"],
    },
  ],
},

persianturtle on 23 Oct 2020

👍2

Was this page helpful?

0 / 5 - 0 ratings