Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CAL-4903] RFC: Icons Turn Sprites into dedicated tsx files with <svg> #18206

Open
PeerRich opened this issue Dec 16, 2024 · 5 comments
Open

[CAL-4903] RFC: Icons Turn Sprites into dedicated tsx files with <svg> #18206

PeerRich opened this issue Dec 16, 2024 · 5 comments
Labels
✨ feature New feature or request 🧹 Improvements Improvements to existing features. Mostly UX/UI performance area: performance, page load, slow, slow endpoints, loading screen, unresponsive 💻 refactor

Comments

@PeerRich
Copy link
Member

PeerRich commented Dec 16, 2024 •
edited
Loading

currently we have an SVG Sprite approach to icons which was introduced here: #16135 by @G3root

I much prefer a "one file per icon" the way dub does it:

https://github.com/dubinc/dub/tree/main/apps/web/ui/shared/icons

that way we get the same performance benefits without uncertain amount of edgcases that we see right now. no built needed either

@G3root wanna do this?

CAL-4903
@PeerRich PeerRich added ✨ feature New feature or request 🧹 Improvements Improvements to existing features. Mostly UX/UI performance area: performance, page load, slow, slow endpoints, loading screen, unresponsive labels Dec 16, 2024
@PeerRich PeerRich changed the title Icon:s Turn Sprites into dedicated tsx files with <svg> [CAL-4903] Icon:s Turn Sprites into dedicated tsx files with <svg> Dec 16, 2024
@PeerRich PeerRich changed the title [CAL-4903] Icon:s Turn Sprites into dedicated tsx files with <svg> Icons Turn Sprites into dedicated tsx files with <svg> Dec 16, 2024
@PeerRich PeerRich changed the title Icons Turn Sprites into dedicated tsx files with <svg> [CAL-4903] Icons Turn Sprites into dedicated tsx files with <svg> Dec 16, 2024
@PeerRich
Copy link
Member Author

can we still find a way to do:

<Icon name="check" />

instead of doing <Check/>?

@PeerRich PeerRich changed the title [CAL-4903] Icons Turn Sprites into dedicated tsx files with <svg> RFC: Icons Turn Sprites into dedicated tsx files with <svg> Dec 16, 2024
@PeerRich PeerRich changed the title RFC: Icons Turn Sprites into dedicated tsx files with <svg> [CAL-4903] RFC: Icons Turn Sprites into dedicated tsx files with <svg> Dec 16, 2024
@PeerRich
Copy link
Member Author

i tried reverting the Sprite PR but its a pretty big and intense code change.

i wanna have a brief discussion how we can move forward here

@G3root
Copy link
Contributor

G3root commented Dec 16, 2024

We can modify the icon build script to output the icons to a separate file by re-exporting the <Icon /> to Separate component component. Thoughts ?

@PeerRich
Copy link
Member Author

thoughts @keithwillcode ? That would definnitely make it more useable as a dev

but i was more thinking of getting rid of the build step in the first place, since we dont add icons that frequently anyway

@PeerRich
Copy link
Member Author

what about this approach? https://x.com/lennardeth/status/1868639178457514432

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
✨ feature New feature or request 🧹 Improvements Improvements to existing features. Mostly UX/UI performance area: performance, page load, slow, slow endpoints, loading screen, unresponsive 💻 refactor
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@PeerRich @G3root