Comments (2)
Hmm. I spent about 3 hours creating a custom template to append the className
prop to the SVG class attribute.
But, I realized that is not necessary!
You shouldn't add the class
attribute to the SVG file.
Because it doesn't make sense!
You can use the class
attribute for path elements; SVGR will convert it to the style
attribute and make it inline.
But, the class
attribute for the SVG element is useless. Because the SVG file is in a separate context from the page. Like an isolated component.
Unless you directly inject an SVG element to the code which means you do not use the SVGR in this case.
from svgr.
Hmm. I spent about 3 hours creating a custom template to append the
className
prop to the SVG class attribute. But, I realized that is not necessary! You shouldn't add theclass
attribute to the SVG file. Because it doesn't make sense!You can use the
class
attribute for path elements; SVGR will convert it to thestyle
attribute and make it inline.But, the
class
attribute for the SVG element is useless. Because the SVG file is in a separate context from the page. Like an isolated component. Unless you directly inject an SVG element to the code which means you do not use the SVGR in this case.
Excellent, thanks! :D
from svgr.
Related Issues (20)
- How to configure SVGR in a tsup package inside a turborepo HOT 1
- Could @svgr/rollup support react17 new jsx transform?
- Does not transform SVG (v3.0.2) HOT 3
- After use, the svg structure in html is not consistent with the svg file
- Document plugins option? HOT 3
- Wrong Code generation for React Native with Refs
- Native generates invalid references to react-native-svg imports
- SVG not loading in Next.js version 14.0.4 HOT 4
- Custom template variable undefined when used as location for import declaration
- @svgr/webpack Not working with svg's from shared package inside monorepo HOT 1
- Unique IDs in runtime HOT 1
- Classic url import issue in typescript
- React Warning: Each child in a list should have a unique 'key' prop - Unveiling the SVGR SVG Component Dilemma
- Snake Case dependancy is depricated
- Introduce option to allow remove attributes for any component name
- overwriting dimensions HOT 1
- Website not working on Arc browser HOT 4
- Does the current project support the use of Vue2 or Vue3?
- fallback title is not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svgr.