feat: alias to customize collection names (#35)

egoist · Dec 12, 2023 · b7f2e1d · b7f2e1d
1 parent 705aaba
commit b7f2e1d
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -55,11 +55,12 @@ Search the icon you want to use here: https://icones.js.org
 
 ### Plugin Options
 
-| Option          | Type                   | Default | Description                                        |
-| --------------- | ---------------------- | ------- | -------------------------------------------------- |
-| prefix          | string                 | `i`     | Class prefix for matching icon rules               |
-| scale           | number                 | `1`     | Scale relative to the current font size            |
-| extraProperties | Record<string, string> | `{}`    | Extra CSS properties applied to the generated CSS. |
+| Option               | Type                              | Default | Description                                        |
+| -------------------- | --------------------------------- | ------- | -------------------------------------------------- |
+| prefix               | string                            | `i`     | Class prefix for matching icon rules               |
+| scale                | number                            | `1`     | Scale relative to the current font size            |
+| extraProperties      | Record<string, string>            | `{}`    | Extra CSS properties applied to the generated CSS. |
+| collectionNamesAlias | [key in CollectionNames]?: string | `{}`    | Alias to customize collection names.               |
 
 ### Custom Icons
 

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -217,3 +217,54 @@ test("set collection automatically", () => {
     '"<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."',
   )
 })
+
+test("custom icon collection name", () => {
+  const result = postcss([
+    tailwindcss({
+      config: {
+        content: [
+          {
+            raw: '<span class="i-hero-archive-box"></span>',
+            extension: "html",
+          },
+        ],
+        plugins: [
+          iconsPlugin({
+            collections: getIconCollections(["heroicons"]),
+            collectionNamesAlias: {
+              heroicons: "hero",
+            },
+          }),
+        ],
+      },
+    }),
+  ]).process(`@tailwind components;
+.foo {
+  @apply i-hero-academic-cap;
+}`)
+
+  expect(result.css).toMatchInlineSnapshot(`
+    ".i-hero-archive-box {
+        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='m20.25 7.5l-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z'/%3E%3C/svg%3E\\")
+    }
+    .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='M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5'/%3E%3C/svg%3E\\")
+    }"
+  `)
+})
diff --git a/src/index.ts b/src/index.ts
@@ -12,8 +12,17 @@ import { IconsOptions } from "./types"
 
 export { getIconCollections, type CollectionNames }
 
+type CollectionNamesAlias = {
+  [key in CollectionNames]?: string
+}
+
 export type IconsPluginOptions = {
   collections?: Record<string, Optional<IconifyJSONIconsData, "prefix">>
+  /**
+   * alias to customize collection names
+   * @default {}
+   */
+  collectionNamesAlias?: CollectionNamesAlias
 } & IconsOptions
 
 export const iconsPlugin = (iconsPluginOptions?: IconsPluginOptions) => {
@@ -22,6 +31,7 @@ export const iconsPlugin = (iconsPluginOptions?: IconsPluginOptions) => {
     scale = 1,
     prefix = "i",
     extraProperties = {},
+    collectionNamesAlias = {},
   } = iconsPluginOptions ?? {}
 
   const collections =
@@ -40,7 +50,9 @@ export const iconsPlugin = (iconsPluginOptions?: IconsPluginOptions) => {
     }
     parseIconSet(collection, (name, data) => {
       if (!data) return
-      components[`${prefix}-${name}`] = generateIconComponent(data, {
+      const collectionName =
+        collectionNamesAlias[prefix as CollectionNames] ?? prefix
+      components[`${collectionName}-${name}`] = generateIconComponent(data, {
         scale,
         extraProperties,
       })