search

jacobmischka / gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config
https://www.npmjs.com/package/gatsby-plugin-react-svg
MIT License
70 stars 21 forks source link

Cannot get gatsby-plugin-react-svg to work in background-image CSS #19

Closed nerdypinkbooks closed 5 years ago

nerdypinkbooks commented 5 years ago

I've had no problem using gatsby-plugin-react-svg as inline SVG, but I spent a good while trying to get it to work as the background-img of a div. In a component, something like: <div className={styles.example} /> And then in the style sheet: .example { background-image: url(../../public/icons/dog.svg); }

When inspecting the element in the DOM, I see the correct classname, and in the stylesheet: .header-module--example--LwtAV { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0d…NmYmZkZmEiIGZpbGw9IiNmYmZkZmEiLz4KCQk8L2c+Cgk8L2c+CjwvZz48L2c+IDwvc3ZnPgo=);

Nothing shows up of course in the browser.

Oh also in my config: { resolve: 'gatsby-plugin-react-svg', options: { rule: { include: /\.inline\.svg$/, }, }, },

I deleted all my inline svg (after getting that working) just to ensure that that wasn't the problem. Now this is the only instance of svg in the project, for testing purposes. Perhaps I missed something, but this is the exact example given in the docs, as far as I can tell.

jacobmischka commented 5 years ago

Sorry, this plugin only handles the inline SVGs. Issues with the data urls will be related to url-loader. Please let me know if I'm misunderstanding, but I think your issue lies elsewhere.

nerdypinkbooks commented 5 years ago

🤦‍♀️Yeah, I totally misread that. Thanks for the clarification!

Mholy commented 3 years ago

Why show example of usage with CSS in the README if it only support inline SVG?

Can't get it to work:

In styles file:

.header-background {
  background-image: url(./path/something.svg);
}

In the browser css inspect background has Component function as string.

jacobmischka commented 3 years ago

The example in the README is one where SVGs are conditionally processed by this plugin, where some are left to be processed by the built-in url-loader. Please note the differences between the configured RegExp for this plugin in that example /\.inline\.svg$/ and ./path/something.svg.

Mholy commented 3 years ago

Oops, I’m sorry, now I read full example more carefully... Thank you!