feat: added unpluginIconViteOptions helper for more easily configuring unplugin icons

Author: AlansCodeLog

README.md

@@ -23,6 +23,8 @@ Everything can just be done from the config. Nuxt will automatically import the
 You can also configure which directives the vue plugin auto-imports with the witchcraftComponents key (the lib will soon be renamed).
 
 ```ts
+import { unpluginIconViteOptions } from "@alanscodelog/vue-components/helpers/unpluginIconViteOptions.js"
+//...
 	modules: [
 		[
 			"@alanscodelog/vue-components/nuxt",
@@ -39,10 +41,25 @@ You can also configure which directives the vue plugin auto-imports with the wit
 				defineModel: true,
 			},
 		}
+		plugins: [
+			Components({
+				resolvers: [
+					IconsResolver({}),
+				],
+			}),
+			// https://github.com/unplugin/unplugin-icons#custom-icons
+			// these opts can be imported from "@alanscodelog/vue-components/helpers/unpluginIconViteOptions.js"
+			// changes the default styling slightly
+			Icons(unpluginIconViteOptions),
+		]
 	}
-
 ```
 
+## Icons
+
+This library uses unplugin-icons to provide icons. You will need to install `@iconify/json` or install the used icon packs (various are used, depending on the component).
+
+
 # Usage with Vite
 
 In `main.ts` or where vue is mounted:
@@ -62,15 +79,11 @@ createApp(App)
 	.use(VueComponentsPlugin) //use plugin
 
 ```
-In the vite config, vue will require the experimental defineModel:
+In the vite config, vue will require the experimental defineModel and the unplugin icons config:
 
 ```
 	plugins: [
-		vue({
-			script: {
-				defineModel: true,
-			},
-		}),
+		// see nuxt's vite config above
 	],
 ```
 

src/helpers/index.ts

@@ -9,3 +9,4 @@ export { NotificationHandler } from "./NotificationHandler.js"
 export { readFile } from "./readFile.js"
 export { ResizeObserverWrapper } from "./resizeObserverWrapper.js"
 export { twMerge } from "./twMerge.js"
+export { unpluginIconViteOptions } from "./unpluginIconViteOptions.js"

src/helpers/unpluginIconViteOptions.ts

@@ -0,0 +1,13 @@
+import type Icons from "unplugin-icons/vite"
+
+// @ts-expect-error not sure why only failing with lint
+export const unpluginIconViteOptions: Parameters<typeof Icons>[0] = {
+	scale: 0, // removes the scale
+	// @ts-expect-error .
+	iconCustomizer: async (_, __, props) => {
+		props.width = "unset"
+	},
+	// note that we can't use tailwind classes
+	// i mean we could, but we have to tell it to include them manually (pain)
+	defaultStyle: "vertical-align: -0.125em; height: 1em; display: inline-block; width:auto;",
+}

vite.config.ts

@@ -12,6 +12,7 @@ import { externalizeDeps } from "vite-plugin-externalize-deps"
 
 // @ts-expect-error .
 import postcss from "./postcss.config.js"
+import { unpluginIconViteOptions } from "./src/helpers/unpluginIconViteOptions.js"
 
 
 const folders = fs.readdirSync("src", { withFileTypes: true })
@@ -48,14 +49,7 @@ export default async ({ mode }: { mode: string }) => defineConfig({
 				}),
 			],
 		}),
-		Icons({
-			// makes this work like fontawesome
-			scale: 0, // removes the scale
-			defaultClass: "icon",
-			// note that we can't use tailwind classes
-			// i mean we could, but we have to tell it to include them manually (pain)
-			defaultStyle: "vertical-align: -0.125em; height: 1em; display: inline-block;",
-		})
+		Icons(unpluginIconViteOptions)
 	],
 	build: {
 		outDir: "dist",