feat: support default-weight / defaultWeight option

Author: vnphanquang

.changeset/tall-moons-promise.md

@@ -0,0 +1,5 @@
+---
+'phosphor-icons-tailwindcss': minor
+---
+
+add `defaultWeight` option

src/plugin.d.ts

@@ -1,3 +1,5 @@
+export type Weight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+
 export interface Options {
 	/**
 	 * the base icon class. Default to `ph`
@@ -23,6 +25,14 @@ export interface Options {
 	'custom-property': string;
 	/** alias for 'custom-property' option */
 	customProperty: string;
+
+	/**
+	 * The default weight for icons.
+	 * Default to `regular`
+	 */
+	'default-weight': Weight;
+	/** alias for 'default-weight' option */
+	defaultWeight: Weight;
 }
 
 declare function plugin(options?: Partial<Options>): {

src/plugin.js

@@ -12,6 +12,7 @@ export default createPlugin.withOptions(
 	function (options = {}) {
 		const prefix = options.prefix ?? 'ph';
 		const customProperty = options['custom-property'] ?? options['customProperty'] ?? '--ph-url';
+		const defaultWeight = options['default-weight'] ?? options['defaultWeight'] ?? 'regular';
 		let layer = options.layer;
 		if (layer === undefined) layer = 'icons';
 
@@ -45,7 +46,7 @@ export default createPlugin.withOptions(
 			api.matchUtilities({
 				[prefix]: (icon) => {
 					// syntax: <name>[--weight]
-					let [name = '', weight = 'regular'] = icon.split('--');
+					let [name = '', weight = defaultWeight] = icon.split('--');
 					name = name.trim();
 					weight = weight.trim();
 

tests/__snapshots__/v3/custom-default-weight.css

@@ -0,0 +1,27 @@
+.h-4 {
+    height: 1rem
+}
+.w-4 {
+    width: 1rem
+}
+@layer icons.base {
+    .ph {
+        --ph-url: none;
+        width: 1em;
+        height: 1em;
+        background-color: currentcolor;
+        color: inherit;
+        mask-image: var(--ph-url);
+        mask-size: 100% 100%;
+        mask-repeat: no-repeat
+    }
+    .ph:is(span,i) {
+        display: inline-block
+    }
+}
+@layer icons {
+    .ph-\[info\] {
+        --ph-url: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xNDAsMTc2YTQsNCwwLDAsMS00LDQsMTIsMTIsMCwwLDEtMTItMTJWMTI4YTQsNCwwLDAsMC00LTQsNCw0LDAsMCwxLDAtOCwxMiwxMiwwLDAsMSwxMiwxMnY0MGE0LDQsMCwwLDAsNCw0QTQsNCwwLDAsMSwxNDAsMTc2Wk0xMjQsOTJhOCw4LDAsMSwwLTgtOEE4LDgsMCwwLDAsMTI0LDkyWm0xMDQsMzZBMTAwLDEwMCwwLDEsMSwxMjgsMjgsMTAwLjExLDEwMC4xMSwwLDAsMSwyMjgsMTI4Wm0tOCwwYTkyLDkyLDAsMSwwLTkyLDkyQTkyLjEsOTIuMSwwLDAsMCwyMjAsMTI4WiIvPjwvc3ZnPg==)
+    }
+}
+	

tests/__snapshots__/v4/custom-default-weight.css

@@ -0,0 +1,35 @@
+/*! tailwindcss v4.0.0-beta.3 | MIT License | https://tailwindcss.com */
+@layer base {
+  :root {
+    --spacing: 0.25rem;
+  }
+}
+@layer utilities {
+  .ph {
+    @layer icons.base {
+      --ph-url: none;
+      width: 1em;
+      height: 1em;
+      background-color: currentcolor;
+      color: inherit;
+      mask-image: var(--ph-url);
+      mask-size: 100% 100%;
+      mask-repeat: no-repeat;
+      &:is(span,i) {
+        display: inline-block;
+      }
+    }
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .ph-\[info\] {
+    @layer icons {
+      --ph-url: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xNDAsMTc2YTQsNCwwLDAsMS00LDQsMTIsMTIsMCwwLDEtMTItMTJWMTI4YTQsNCwwLDAsMC00LTQsNCw0LDAsMCwxLDAtOCwxMiwxMiwwLDAsMSwxMiwxMnY0MGE0LDQsMCwwLDAsNCw0QTQsNCwwLDAsMSwxNDAsMTc2Wk0xMjQsOTJhOCw4LDAsMSwwLTgtOEE4LDgsMCwwLDAsMTI0LDkyWm0xMDQsMzZBMTAwLDEwMCwwLDEsMSwxMjgsMjgsMTAwLjExLDEwMC4xMSwwLDAsMSwyMjgsMTI4Wm0tOCwwYTkyLDkyLDAsMSwwLTkyLDkyQTkyLjEsOTIuMSwwLDAsMCwyMjAsMTI4WiIvPjwvc3ZnPg==);
+    }
+  }
+}
+: ;

tests/plugin.test.ts

@@ -68,6 +68,24 @@ function tests(run: Run, version: number) {
 		);
 	});
 
+	test('custom `default-weight`', async function () {
+		const result = await run([...COMMON_CANDIDATES, 'ph', 'ph-[info]'], {
+			'default-weight': 'thin',
+		});
+		await expect(result).toMatchFileSnapshot(
+			path.resolve(import.meta.dirname, '__snapshots__', `v${version}/custom-default-weight.css`),
+		);
+	});
+
+	test('custom `defaultWeight`', async function () {
+		const result = await run([...COMMON_CANDIDATES, 'ph', 'ph-[info]'], {
+			defaultWeight: 'thin',
+		});
+		await expect(result).toMatchFileSnapshot(
+			path.resolve(import.meta.dirname, '__snapshots__', `v${version}/custom-default-weight.css`),
+		);
+	});
+
 	test('no icon found', async function () {
 		const result = await run([...COMMON_CANDIDATES, 'ph', 'ph-[404]']);
 		await expect(result).toMatchFileSnapshot(