feat: use svg sprite for icons #480
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Thank you for following the naming conventions for pull request titles! 🙏 |
G3root
commented
Aug 10, 2024
| import { $ } from "execa"; | ||
| import glob from "fast-glob"; | ||
| import fsExtra from "fs-extra"; | ||
| import { parse } from "node-html-parser"; |
There was a problem hiding this comment.
script to generate sprite sheet
G3root
commented
Aug 10, 2024
| @@ -18,6 +18,7 @@ | |||
| "db:seed": "NODE_ENV='test' tsx prisma/seeds/index.ts", | |||
| "dev": "next dev", | |||
| "build": "next build", | |||
| "build:icons": "tsx scripts/build-icons.ts", | |||
There was a problem hiding this comment.
command to rebuild the sprite sheet when new icons are added to the list
G3root
commented
Aug 10, 2024
| @@ -0,0 +1,103 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| <!-- This file is generated by npm run build:icons --> | |||
There was a problem hiding this comment.
generated sprite sheet
G3root
commented
Aug 10, 2024
| export const iconList = new Set([ | ||
| "account-circle-fill", | ||
| "account-circle-line", | ||
| "add-circle-line", |
There was a problem hiding this comment.
list of icons we are using through out the app
G3root
commented
Aug 10, 2024
| import type { IconName } from "./icon-names"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Rendering icons as JSX components is expensive and significantly increases the size of your bundle. This PR aims to address that by replacing them with SVG sprite icons, which are cacheable and faster than the JS based solution.
here's a explanation why we shouldn't import SVG icons as JSX https://twitter.com/_developit/status/1382838799420514317?lang=en
advantages using sprite sheet icons