diff --git a/plugins-demo/tailwind4-demo/src/App.vue b/plugins-demo/tailwind4-demo/src/App.vue
index f2697bc..6430145 100644
--- a/plugins-demo/tailwind4-demo/src/App.vue
+++ b/plugins-demo/tailwind4-demo/src/App.vue
@@ -10,7 +10,7 @@
Monotone icons, arrow changes on hover:
diff --git a/plugins-demo/tailwind4-demo/src/assets/main.css b/plugins-demo/tailwind4-demo/src/assets/main.css
index 7726e74..77bd40f 100644
--- a/plugins-demo/tailwind4-demo/src/assets/main.css
+++ b/plugins-demo/tailwind4-demo/src/assets/main.css
@@ -2,6 +2,11 @@
@plugin "@iconify/tailwind4";
+@plugin "@iconify/tailwind4" {
+ prefix: 'icon-override';
+ override-only: true;
+}
+
.demo {
color: var(--color-blue-600);
}
diff --git a/plugins/tailwind/package.json b/plugins/tailwind/package.json
index 2bee8c9..9925f3b 100644
--- a/plugins/tailwind/package.json
+++ b/plugins/tailwind/package.json
@@ -3,7 +3,7 @@
"description": "Iconify plugin for Tailwind CSS",
"type": "module",
"author": "Vjacheslav Trushkin (https://iconify.design)",
- "version": "1.0.0",
+ "version": "1.0.1",
"license": "MIT",
"main": "./dist/plugin.js",
"types": "./dist/plugin.d.ts",
diff --git a/plugins/tailwind/src/plugin.ts b/plugins/tailwind/src/plugin.ts
index 0eca6f9..26411ac 100644
--- a/plugins/tailwind/src/plugin.ts
+++ b/plugins/tailwind/src/plugin.ts
@@ -1,26 +1,55 @@
/* eslint-disable @typescript-eslint/unbound-method */
import plugin from 'tailwindcss/plugin';
import { getDynamicCSSRules } from './dynamic.js';
+import type { DynamicIconifyPluginOptions } from './helpers/options.js';
/**
* Generate styles for dynamic selector
*
* Usage in HTML:
*/
-function addDynamicIconSelectors(): ReturnType {
- const prefix = 'icon';
- return plugin(({ matchComponents }) => {
- matchComponents({
- [prefix]: (icon: string) => {
- try {
- return getDynamicCSSRules(icon);
- } catch (err) {
- // Log error, but do not throw it
- console.error((err as Error).message);
- return {};
- }
- },
+function addDynamicIconSelectors(): ReturnType {
+ return plugin.withOptions((params: unknown) => {
+ // Clean up options
+ const options: DynamicIconifyPluginOptions = {};
+ Object.entries(params ?? {}).forEach(([key, value]) => {
+ switch (key) {
+ case 'prefix':
+ if (typeof value === 'string') {
+ options.prefix = value;
+ }
+ break;
+
+ case 'overrideOnly':
+ case 'override-only':
+ case 'overrideonly':
+ if (value === true) {
+ options.overrideOnly = true;
+ }
+ break;
+
+ case 'scale':
+ if (typeof value === 'number') {
+ options.scale = value;
+ }
+ break;
+ }
});
+
+ const prefix = options.prefix || 'icon';
+ return ({ matchComponents }) => {
+ matchComponents({
+ [prefix]: (icon: string) => {
+ try {
+ return getDynamicCSSRules(icon);
+ } catch (err) {
+ // Log error, but do not throw it
+ console.error((err as Error).message);
+ return {};
+ }
+ },
+ });
+ };
});
}