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.

Eliminate all `icons/*.tsx` files and use svg instead

See original GitHub issue

Previously 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:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
charIeszhaocommented, Sep 1, 2022

Did anyone started working on this?

Not yet. First come, first served!

0reactions
github-actions[bot]commented, Oct 8, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

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