https://github.com/craftzing/craftzing-icons-setup-example
Base repo on how to setup icons correctly
https://github.com/craftzing/craftzing-icons-setup-example
Last synced: about 1 year ago
JSON representation
Base repo on how to setup icons correctly
- Host: GitHub
- URL: https://github.com/craftzing/craftzing-icons-setup-example
- Owner: craftzing
- Created: 2024-08-21T15:51:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-25T15:09:08.000Z (over 1 year ago)
- Last Synced: 2025-02-25T15:32:58.866Z (over 1 year ago)
- Language: JavaScript
- Size: 271 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# icons setup example
This is an example setup copy pasted from the [itsme® public website](https://www.itsme-id.com/) for inspiration purposes.
This setup uses [SVGO](https://github.com/svg/svgo) and converts everything to two things:
- SVG sprite file that only exists of small UI icons which are used in most of the UI in the website;
- SVG DuoColor icons (read: astethic illustrative icons) which are loaded separatly;
All of these icons are loaded onto the pages with [SVG `use` trick](https://css-tricks.com/svg-use-with-external-reference-take-2/).
We attached 2 components in this repo of which you can see how it actually works as a React component.
This technique has a lot of benefits:
- 🏎️ It's a great performance bump, adding all icons inline in React is frowned upon as it will be part of the virtual dom.
- 💽 Caching purposes, if you load it once on the client you can cache it forever!
- 💅🏻 Modifiable and flexibility, by using the `use` trick you can still change all icon colors.
Read more into performance impact for React here:
https://kurtextrem.de/posts/svg-in-js
## run local demo
To run the local demo, you need to the following:
1. run `npm run icons` to build icon sprite and all other icons
2. run `npx http-server -o public` (or another simple plug and play node server library)
3. open `http://127.0.0.1:8080/`