question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CRA2 style tag with svg as component

See original GitHub issue

Is this a bug report?

No.

I would like to use the new svg as react component feature from CRA2 but svgr keeps removing the <style> tag from my image. What I want is to use the inlineStyles plugin from svgo to transform the style tag into properties of the svg tag.

As I can see in #5062 and #4799 svgo has been disabled. Is there any way I can override the default configuration ? I have tried with a .svgrrc.json, a .svgo.yml and svgr key in the package.json but nothing worked.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
tnargibcommented, Oct 4, 2018

It seems that not removing the style tag is a v3 feature of svgr. See smooth-code/svgr#191. Current version of react-scripts is 2.4.1 so maybe just an update would do the trick ?

0reactions
mrmckebcommented, Jun 16, 2021

CRA now ships with a newer version of SVGR and we think this is resolved. If this is still an problem, can you raise a new issue? Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why isn't the style tag in this SVG affecting elements?
Why is the inline style not affecting the element with the class? I have tried various combinations of CDATA , <defs> etc (per...
Read more >
<style> - SVG: Scalable Vector Graphics - MDN Web Docs
The SVG <style> element allows style sheets to be embedded directly within SVG content. Note: SVG's style element has the same attributes as...
Read more >
Working with SVGs in React - Ross Bulat - Medium
Styled Components and SVGs. Being able to embed SVG CSS properties within React components is perhaps the most efficient means of styling an...
Read more >
Add SVGs as React Components with Create React App 2.0
I'll call it CRA2-SVG. Immediately, cd into the app after it's bootstrapped. Once everything is created, then open our VSCode with code period...
Read more >
How to use SVGs in React | Sanity.io guide
JSX supports all SVG tags. We can (almost) paste the SVG directly into our React components! This is the most straightforward method to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found