feat: Add vite-plugin-icons-spritesheet instead of the custom build script

[AlemTuzlak]

Test Plan

• Check there are no type-errors
• all the icons work as expected
• behavior is same as before
• adding/editting/removing icons produces new spritesheet automatically
• Check if icons work when deployed

Checklist

• Tests updated
• Docs updated

Screenshots

[kentcdodds]

Okay, I'm a fan. Thanks a lot!

[ryanwoodcox]

@AlemTuzlak this is awesome. Should the https://github.com/epicweb-dev/epic-stack/blob/main/other/svg-icons/README.md also be updated?

[AlemTuzlak]

Thank you, it probably should 😅

[ryanwoodcox]

Thank you, it probably should 😅

I'd suggest something like:

# Icons

These icons were downloaded from https://icons.radix-ui.com/ which is licensed under MIT:
https://github.com/radix-ui/icons/blob/master/LICENSE

It's important that you only add icons to this directory that the application actually needs as the
`vite-plugin-icons-spritesheet` plugin is configured to generate a spritesheet with icons from this
directory. The plugin re-runs on every edit/delete/add to this directory.

[kentcdodds]

Fixed. Thanks!

[damiensedgwick]

I opened an issue thinking that my app was broken and Kent kindly pointed me to here. When I try and install a new icon I get hit with an error npm error Missing script: "build:icons"

I've used npx epicli update to apply the latest patches to my project but it seems like new icons cannot be added, unless I am missing something?

[AlemTuzlak]

@damiensedgwick Seems to be related to sly.json config, it tries to run the build icons script everytime you pull in a new icon, if you change the script in /other/sly/sly.json to:

{
	"$schema": "https://sly-cli.fly.dev/registry/config.json",
	"libraries": [
		{
			"name": "@radix-ui/icons",
			"directory": "./other/svg-icons",
			"postinstall": [],
			"transformers": [
				"transform-icon.ts"
			]
		}
	]
}

does it work?

[damiensedgwick]

that did the trick, thank you @AlemTuzlak

edit: maybe not, my icons are not showing:

[AlemTuzlak]

@damiensedgwick are you running the dev server? or did you run npm run build? . Feel free to add me on discord so we can figure it out, I've used sly to pull in icons with this plugin so it definitely should work

Edit:
Tried pulling in new icons from radix and it worked fine

[damiensedgwick]

@damiensedgwick are you running the dev server? or did you run npm run build? I guess to align it with the old approach more it would be more correct to run npm run build after pulling it in. Feel free to add me on discord so we cna figure it out, I've used sly to pull in icons with this plugin so it definitely should work

I've ran both the dev server and built it, as well as validated and it did work for the gear but for some reason something isn't quite lined up now when I tried adding two more icons.

I will add you on Discord, cheers!

[damiensedgwick]

@damiensedgwick are you running the dev server? or did you run npm run build? I guess to align it with the old approach more it would be more correct to run npm run build after pulling it in. Feel free to add me on discord so we cna figure it out, I've used sly to pull in icons with this plugin so it definitely should work

I've ran both the dev server and built it, as well as validated and it did work for the gear but for some reason something isn't quite lined up now when I tried adding two more icons.

I will add you on Discord, cheers!

Tried installing icons whilst the server was running and it worked as expected. Then tried stopping the server and installing, and it also worked as expected so I am not really sure what was happening but all is right with the icons now.