How to load SVG images? about webpack-starter-basic HOT 11 OPEN

If you want to use svg files, you have to add a file-loader in your webpack.dev.js and webpack.prod.js config files (in rules[] ) :

...
{
    test: /\.svg$/, 
    loader: 'file-loader' 
}
...

from webpack-starter-basic.

;-)

from webpack-starter-basic.

Thanks for the help @washaweb ! And sorry I couldn't look into this everyone else, stressing out over deadlines currently.

Will incorporate the solution into the README.

from webpack-starter-basic.

can you help me?

from webpack-starter-basic.

@washaweb this boilerplate use url-loader to loading images, why for svg images i need to use file-loader?
can I add svg here: test: /\.(png|jpg|gif|svg)$/, and load with url-loader? or from file-loader is better?

from webpack-starter-basic.

How can I reference to the SVG file in the index.html after I added the loader to webpack's config files? <img src="<% require('.src/path/to/image.svg') %>"> doesn't seem to work - it outputs only an empty string.

from webpack-starter-basic.

@chrisschaetzlein either remove the '.' at the beginning of the SVG path or add a slash just after. You URL should look like this:

<%= require('./src/path/to/image.svg') %>
or:
<%= require('src/path/to/image.svg') %>

from webpack-starter-basic.

@washaweb That was a typo in my comment, sorry. I already had ./src/path/to/image.svg. Webpack seems to find the file, it's included in the console output. Doesn't output anything to index.html though.

from webpack-starter-basic.

@UlpiusCode You could do that (using url-loader for your svg images), but doing so, SVG code would be converted in a base64 encoded image.
That is not a really a good thing if you intend to later modify your SVG code with CSS or JavaScript interactions.

from webpack-starter-basic.

@chrisschaetzlein do you place this code in a <img src=""> tag ?

from webpack-starter-basic.

@washaweb jeez, I started the include in the .html file with <% require instead of <%= require... sorry! It works with the latter, obviously 🙄

from webpack-starter-basic.