From b7f2e1d49c42c003c0f6325ee74c3399affafd21 Mon Sep 17 00:00:00 2001 From: Stephen Zhou Date: Tue, 12 Dec 2023 21:39:26 +0800 Subject: [PATCH] feat: alias to customize collection names (#35) --- README.md | 11 +++++----- src/index.test.ts | 51 +++++++++++++++++++++++++++++++++++++++++++++++ src/index.ts | 14 ++++++++++++- 3 files changed, 70 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0796324..edf8065 100644 --- 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 | `{}` | 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 | `{}` | 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 index f6b5e36..ddc9d26 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -217,3 +217,54 @@ test("set collection automatically", () => { '":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: '', + 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 index 915adcd..38032bd 100644 --- 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> + /** + * 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, })