fix icon docs and things

Author: kentcdodds

docs/icons.md

@@ -3,9 +3,11 @@
 The Epic Stack uses SVG sprites for
 [optimal icon performance](https://benadam.me/thoughts/react-svg-sprites/).
 You'll find raw SVGs in the `./other/svg-icons` directory. These are then
-compiled into a sprite using the `npm run build:icons` script which generates
-the `icon.svg` file and an `icons.json` manifest file that allows Typescript to
-pick up the names of the icons.
+compiled into a sprite using the
+[`vite-plugin-icons-spritesheet`](https://github.com/jacobparis-insiders/vite-plugin-icons-spritesheet)
+plugin which generates the `app/components/ui/icons/sprite.svg` file and the
+accompanying `types.ts` file that allows Typescript to pick up the names of the
+icons.
 
 You can use [Sly](https://github.com/jacobparis-insiders/sly/tree/main/cli) to
 add new icons from the command line.
@@ -21,20 +23,16 @@ icons available in the `@radix-ui/icons` collection and let you select the ones
 you want to add.
 
 Sly has been configured in the Epic Stack to automatically add the icons to the
-`./other/svg-icons` directory and to run the `npm run build:icons` script
-automatically, so there are no extra steps to take. You can see the
-configuration in the `./other/sly/sly.json` file.
+`./other/svg-icons` directory, so there are no extra steps to take. You can see
+the configuration in the `./other/sly/sly.json` file.
 
 The SVGs used by default in the Epic Stack come from
 [icons.radix-ui.com](https://icons.radix-ui.com/). You can download additional
 SVG icons from there, or provide your own. Once you've added new files in the
-directory, run `npm run build:icons` and you can then use the `Icon` component
-to render it. The `icon` prop is the name of the file without the `.svg`
-extension. We recommend using `kebab-case` filenames rather than `PascalCase` to
-avoid casing issues with different operating systems.
-
-Note that the `./other/build-icons.ts` file automatically removes `width` and
-`height` props from your SVGs to ensure they scale properly.
+directory, run `npm run build` and you can then use the `Icon` component to
+render it. The `icon` prop is the name of the file without the `.svg` extension.
+We recommend using `kebab-case` filenames rather than `PascalCase` to avoid
+casing issues with different operating systems.
 
 By default, all the icons will have a height and width of `1em` so they should
 match the font-size of the text they're next to. You can also customize the size

docs/troubleshooting.md

@@ -40,7 +40,7 @@ error like this during local development:
 
 > X [ERROR] Could not resolve "#app/components/ui/icon.tsx"
 
-You need to be manually regenerate the icon with `npm run build:icons`.
+You need to be manually regenerate the icon with `npm run build`.
 
 See
 [the icons decision document](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/020-icons.md)

other/sly/sly.json

@@ -4,7 +4,6 @@
 		{
 			"name": "@radix-ui/icons",
 			"directory": "./other/svg-icons",
-			"postinstall": ["npm", "run", "build:icons"],
 			"transformers": ["transform-icon.ts"]
 		}
 	]

other/svg-icons/README.md

@@ -4,8 +4,6 @@ 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 there's no "tree-shaking" for sprites. If you wish to manually
-split up your SVG sprite into multiple files, you'll need to update the
-`build-icons.ts` script to do that.
-
-Run `npm run build:icons` to update the sprite.
+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.

package-lock.json

@@ -8,7 +8,10 @@
 		"paths": {
 			"#app/*": ["./app/*"],
 			"#tests/*": ["./tests/*"],
-			"@/icon-name": ["./app/components/ui/icons/types.ts", "./types/types.ts"]
+			"@/icon-name": [
+				"./app/components/ui/icons/types.ts",
+				"./types/icon-name.d.ts"
+			]
 		}
 	}
 }