feat: automatically discover icons (egoist#29)

* feat: automatically discover icons

* docs: update

README.md

@@ -27,6 +27,7 @@ module.exports = {
   plugins: [
     iconsPlugin({
       // Select the icon collections you want to use
+      // You can also ignore this option to automatically discover all icon collections you have installed
       collections: getIconCollections(["mdi", "lucide"]),
     }),
   ],

example/tailwind.config.cjs

@@ -1,8 +1,6 @@
 module.exports = {
   content: ["./index.html"],
   plugins: [
-    require("../dist").iconsPlugin({
-      collections: require("../dist").getIconCollections(["heroicons"]),
-    }),
+    require("../dist").iconsPlugin(),
   ],
 }

gen-types.mjs

@@ -7,9 +7,11 @@ const collections = req("@iconify/json/collections.json")
 
 fs.writeFileSync(
   "types.ts",
-  `/** All the available icon collections when you have \`@iconify/json\` installed  */\nexport type CollectionNames = ${Object.keys(
+  `export const availableCollectionNames = [${Object.keys(
     collections,
   )
     .map((v) => JSON.stringify(v))
-    .join("|")}`,
+    .join(", ")}] as const
+/** All the available icon collections when you have \`@iconify/json\` installed  */\nexport type CollectionNames = typeof availableCollectionNames[number]
+`,
 )

package.json

@@ -21,7 +21,8 @@
     "build": "pnpm run build-fast --dts-resolve",
     "test": "vitest run",
     "prepublishOnly": "pnpm run build",
-    "gen-types": "node ./gen-types.mjs"
+    "gen-types": "node ./gen-types.mjs",
+    "prepare": "pnpm run gen-types"
   },
   "license": "MIT",
   "devDependencies": {

src/core.ts

@@ -46,6 +46,12 @@ function callerPath(): string | null {
   return result[1]
 }
 
+export const isPackageExists = (id: string) => {
+  const p = callerPath()
+  const cwd = p ? path.dirname(p) : process.cwd()
+  return Boolean(localResolve(cwd, id))
+}
+
 export const getIconCollections = (
   include: CollectionNames[] | "all" = "all",
 ): Record<string, IconifyJSON> => {

src/index.test.ts

@@ -169,3 +169,51 @@ test("custom icon", () => {
     "
   `)
 })
+
+test("set collection automatically", () => {
+  const processor = postcss([
+    tailwindcss({
+      config: {
+        content: [
+          {
+            raw: "",
+            extension: "html",
+          },
+        ],
+        plugins: [iconsPlugin()],
+      },
+    }),
+  ])
+
+  const result = processor.process(`
+.foo {
+  @apply i-heroicons-arrow-left;
+}
+`)
+
+  expect(result.css).toMatchInlineSnapshot(`
+    "
+    .foo {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        background-color: currentColor;
+        -webkit-mask: no-repeat center / 100%;
+        mask: no-repeat center / 100%;
+        -webkit-mask-image: var(--svg);
+        mask-image: var(--svg);
+        --svg: url(\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18'/%3E%3C/svg%3E\\")
+    }
+    "
+  `)
+
+  expect(() => {
+    processor.process(`
+  .foo {
+    @apply i-mdi-home;
+  }
+  `).css
+  }).toThrowErrorMatchingInlineSnapshot(
+    '"<css input>:3:5: The `i-mdi-home` class does not exist. If `i-mdi-home` is a custom class, make sure it is defined within a `@layer` directive."',
+  )
+})

src/index.ts

@@ -1,23 +1,36 @@
 import { IconifyJSONIconsData } from "@iconify/types"
 import plugin from "tailwindcss/plugin.js"
 import { parseIconSet } from "@iconify/utils"
-import { generateIconComponent, getIconCollections } from "./core"
-import { CollectionNames } from "../types"
+import {
+  generateIconComponent,
+  getIconCollections,
+  isPackageExists,
+} from "./core"
+import { CollectionNames, availableCollectionNames } from "../types"
 import { type Optional } from "./utils"
 import { IconsOptions } from "./types"
 
 export { getIconCollections, type CollectionNames }
 
 export type IconsPluginOptions = {
-  collections: Record<string, Optional<IconifyJSONIconsData, "prefix">>
+  collections?: Record<string, Optional<IconifyJSONIconsData, "prefix">>
 } & IconsOptions
 
-export const iconsPlugin = ({
-  collections,
-  ...options
-}: IconsPluginOptions) => {
-  const { scale = 1, prefix = "i", extraProperties = {} } = options ?? {}
+export const iconsPlugin = (iconsPluginOptions?: IconsPluginOptions) => {
+  const {
+    collections: propsCollections,
+    scale = 1,
+    prefix = "i",
+    extraProperties = {},
+  } = iconsPluginOptions ?? {}
 
+  const collections =
+    propsCollections ??
+    getIconCollections(
+      availableCollectionNames.filter((name) =>
+        isPackageExists(`@iconify-json/${name}`),
+      ),
+    )
   const components: Record<string, Record<string, string>> = {}
 
   for (const prefix of Object.keys(collections)) {