Webpack config:

1. For a .svg I use config:{ test: /\.svg$/, use: ['svgr/webpack'] }
2. For .scss I use css-loader, postcss-loader and sass-loader

Folder structure:

I have folder structure that looks like this:

- App
-- styles
--- globals.scss // Here I import my partials
--- partials
---- _my_partial.scss
-- icons
--- svgs
---- my_icon.svg

svgr loader:

I like svgr loader as it allows me to just import my icon and use it as React ponent:

import MyIcon from './icons/svgs/my_icon.svg';
...
<MyIcon />

The actual problem:

I was fine with this approach but I have to get one of the svgs as a background-image, so inside _my_partial.scss I wrote:

background-image: url(../icons/svgs/my_icon.svg);

I am up just one folder in this url as when being up two, it plained that it cannot resolve it - I guess this is because I import my partials in my globals.scss.

With this setup all I get in the browser is:

GET http://localhost:3005/[object%20Module] 404 (Not Found)

Webpack config:

1. For a .svg I use config:{ test: /\.svg$/, use: ['svgr/webpack'] }
2. For .scss I use css-loader, postcss-loader and sass-loader

Folder structure:

I have folder structure that looks like this:

- App
-- styles
--- globals.scss // Here I import my partials
--- partials
---- _my_partial.scss
-- icons
--- svgs
---- my_icon.svg

svgr loader:

I like svgr loader as it allows me to just import my icon and use it as React ponent:

import MyIcon from './icons/svgs/my_icon.svg';
...
<MyIcon />

The actual problem:

I was fine with this approach but I have to get one of the svgs as a background-image, so inside _my_partial.scss I wrote:

background-image: url(../icons/svgs/my_icon.svg);

I am up just one folder in this url as when being up two, it plained that it cannot resolve it - I guess this is because I import my partials in my globals.scss.

With this setup all I get in the browser is:

GET http://localhost:3005/[object%20Module] 404 (Not Found)

• javascript
• reactjs
• svg
• webpack
• sass

• "I am up just one folder in this url as when being up two, it plained that it cannot resolve it". How did you write the import when being up two folders? – Tholle Commented Jul 25, 2018 at 13:57
• What I meant that when I wrote the path ../../icons/svgs/my_icon.svg it plained that it cannot resolve it. It does not plain now, when I wrote ../icons/svgs/my_icon.svg – mdmb Commented Jul 25, 2018 at 14:02

1 Answer 1

svgr/webpack turns your svg into react ponents, so when using svg into scss it's actually an object / react ponent. Change svgr/webpack to file-loader in order to use that. If you want to still use both, you could try something like:

{ test: /\.react.svg$/, use: ['svgr/webpack'] }
{ test: /\.svg$/, use: ['file-loader'] }

then rename all the svg's that you want as React ponents to filename.react.svg and the rest just leave with .svg.

I haven't tested this though :)

UPDATE: Looking at the documentation (section: Handle SVG in CSS, Sass or Less), it seems you can use svgr/webpack with file-loader:

https://github./smooth-code/svgr/tree/master/packages/webpack

{
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: {
      test: /\.jsx?$/
    },
    use: ['babel-loader', '@svgr/webpack', 'url-loader']
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader'
  },
}

Either way, you probably need to make a few changes to fit in your needs but it supports it :)