Skip to content

Navigation Menu

Sign in
Sign up

feat: use svg sprite for icons - #480

Open
G3root wants to merge 30 commits into
main from
icons
Open

feat: use svg sprite for icons #480
G3root wants to merge 30 commits into
main from
icons

Conversation

@G3root

@G3root G3root commented Aug 10, 2024

Copy link
Copy Markdown
Collaborator

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

  • doesn't increase js bundle size
  • icons can be cacheable since it's a single svg
  • icons can be easily organized later by adding consistent sizing due to being a single component

Raju-kadel-27 reacted with heart emoji
G3root added 28 commits August 9, 2024 06:34

github-actions Bot commented Aug 10, 2024 •
edited
Loading

Copy link
Copy Markdown

Thank you for following the naming conventions for pull request titles! 🙏

Comment thread scripts/build-icons.ts
import { $ } from "execa";
import glob from "fast-glob";
import fsExtra from "fs-extra";
import { parse } from "node-html-parser";

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

script to generate sprite sheet

Comment thread package.json
"db:seed": "NODE_ENV='test' tsx prisma/seeds/index.ts",
"dev": "next dev",
"build": "next build",
"build:icons": "tsx scripts/build-icons.ts",

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

command to rebuild the sprite sheet when new icons are added to the list

Comment thread public/icons/sprite.svg
@@ -0,0 +1,103 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- This file is generated by npm run build:icons -->

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

generated sprite sheet

export const iconList = new Set([
"account-circle-fill",
"account-circle-line",
"add-circle-line",

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

list of icons we are using through out the app

import type { IconName } from "./icon-names";

import { cn } from "@/lib/utils";

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

icon component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

AltStyle によって変換されたページ (->オリジナル) /