Eliminate all `icons/*.tsx` files and use svg instead
See original GitHub issuePreviously when we need to dynamically change the color of an SVG image, we had to wrap the SVG elements in a tsx file, and import it as a component in other page components.
But now we are using @parcel/transformer-svg
plugin, which helps automatically transform a regular SVG file into a React component, and we are able to import it as component directly in other page components. (Example usage can be found in src/pages/GetStarted/hook.ts
)
Therefore, we need to clean up the previously created *.tsx files in src/icons
, and create *.svg files in src/assets
instead.
Issue Analytics
- State:
- Created a year ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
How to Use SVG Icons in React with React Icons and Font ...
After finding the icon you want, hover over that icon, where you'll see options to copy that icon as SVG or JSX, and...
Read more >Import icon as component instead as a svg file (React + ...
In a common scenario, we usually to import all the svg files and write conditional for display each one. Post.tsx. As a show...
Read more >How to use SVG Icons as React Components - Robin Wieruch
A walkthrough on how to use SVG Icons in React applications. ... Next, put all your .svg icon files into a /assets folder...
Read more >How to display svg icons(.svg files) in UI using React ...
I have seen code which talk about bring the svg code into react rather than using the .svg icon as image and show...
Read more >How to use SVGs in React | Sanity.io guide
This article will explore how to use SVG in React in three examples: A loading icon; A hover text effect; A pizza customizer ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Not yet. First come, first served!
This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.