I'm having a lot of trouble working with SVG in my webpack workflow. I'm trying to get it to display with the background: url(sample.svg)
property in CSS. Using this alone did not work, so I figured I had use a loader. Here are the steps I used.
I used svg-url-loader to load the SVG.
1.
I installed svg-url-loader
via npm and added this to my module.exports
:
{
test: /\.svg/,
use: {
loader: 'svg-url-loader'
}
},
2. I added this to the top of my index.js file:
require('svg-url-loader!./images/topography.svg');
3.
I added background-image
with the SVG path to my CSS:
body {
background-image: url("../images/topography.svg");
background-size: 340px, auto;
min-height: calc(100vh - 100px);
margin: 50px;
background-attachment: fixed;
letter-spacing: -1px;
}
4. The SVG is not being rendered to the page. When I inspect the body in browser, I find this:
background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);
I don't know too much about data-uri, so maybe I am running into the issue there.
Also, I've tried this using different SVG files, and none of them worked.
Once you start your application, Webpack will do its thing and you don't need to worry about your SVGs anymore. You can put your SVG files anywhere in your src/ folder and import them wherever you need them as React components. This method is generally referred to as inline-svg .
Webpack's url-loader lets you import arbitrary files, like images. If you import a . png file, url-loader will ensure that import resolves to a Base64 string representing the contents of the file.
This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.
The webpack way to load svg? · Issue #595 · webpack/webpack · GitHub Move svg and png fallback files into the destination folder. Bundle a module for the client to check for svg support. Bundle a module for the client that returns the correct url for the image based on svg support.
webpack file loader is a loader used mainly for supporting images such as SVG and PNG, and fonts in your webpack project. There are different configurations for webpack 4 and webpack 5.
Bundle a module for the client that returns the correct url for the image based on svg support. A svg-loader which works similar to the url-loader and the html-loader. It exports a DataUrl (not base64 encoded, as it's pure text) and it requires referenced resources from inside the SVG (you can use URL in the svg).
svg-inline-loader | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack is a module bundler.
I met the same exact error. After some investigation I found I added another svg
loader which caused this problem, so I fixed it by deleting the other svg
loader:
{
test: /\.svg/,
use: {
loader: 'svg-url-loader'
}
},
{
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [{ removeTitle: false }],
floatPrecision: 2
},
jsx: true
}
}
]
}
So you maybe also added some extra loaders to handle the svg
files at the same time, please check.
You can:
a) set up loaders in webpack.config.js:
example.js:
import ExampleIcon from 'assets/icons/example-icon.svg';
...
<ExampleIcon className={styles.exampleIcon} />
webpack.config.js:
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'react-svg-loader',
options: {
svgo: {
plugins: [{ removeTitle: false }],
floatPrecision: 2
},
jsx: true
}
}
]
},
b) or set up loaders in the import string:
import ExampleIcon from '!babel-loader!react-svg-loader!assets/icons/example-icon.svg';
...
<ExampleIcon className={styles.exampleIcon} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With