3

I have scoured the internet to look for a solution to load svgs using the file-loader and the svg-inline-loader. To be more precies, I want the option to use both separately, but I can't seem to get the webpack.config right. This is my config so far: 

module.exports = {
  entry: {
    app: Path.resolve(__dirname, '../src/scripts/index.js')
  },

  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.(svg)(\?.*)?$/,
        use: {
          loader: 'svg-inline-loader?classPrefix',
        }
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|svg|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }
        }
      }
    ]
  },

};

And what I want to achieve, is the ability to do both:

<img id="logo" src="../assets/img/my.svg" alt="My Svg" /> Which nicely loads the svg as an img.

and

import mySvg from "../assets/img/my.svg"; Which gives me the svg content.

The problem with my current configuration, is that one breaks the other. I might be doing something stupid or implementing this in the wrong way, either way, I need advice, help or anything that might make the possibilities work... Or I have to stick to one, which is not a preference.

Thanks in advance!

Oh and my temporary and not so preferred solution is removing the svg-inline-loader from the config and import them in my js using:

import mySvg from "-!svg-inline-loader?classPrefix!../assets/img/my.svg";

TheYuwana
  • 185
  • 2
  • 13

1 Answers1

0

you can try someting like this

 module: {
      rules: [{
        test: /\.(svg)(\?.*)?$/,
        loader: 'raw-loader'
      }]
    },
kamprasad
  • 608
  • 4
  • 12
  • If I am reading the `raw-loader` github docs right, this works the same as the `svg-inline-loader`. Which works as it should, but it will conflict with the `file-loader`, if I want to use inline and – TheYuwana Nov 12 '19 at 10:46