agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-06 15:23:54 +00:00
Code Issues Releases Activity

chore: add options to tailwind plugin

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2024-12-26 10:05:04 +02:00
parent fdb8263c46
commit 6c6eec1c71
4 changed files with 49 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins-demo/tailwind4-demo/src/App.vue
View File

@ -10,7 +10,7 @@
Monotone icons, arrow changes on hover: Monotone icons, arrow changes on hover:
<span class="text-2xl demo"> <span class="text-2xl demo">
<span <span
class="icon-[mdi-light--arrow-left] hover:icon-[mdi-light--arrow-right]" class="icon-[mdi-light--arrow-left] hover:icon-override-[mdi-light--arrow-right]"
></span> ></span>
<span class="icon-[mdi-light--forum]"></span> <span class="icon-[mdi-light--forum]"></span>
</span> </span>

5
plugins-demo/tailwind4-demo/src/assets/main.css
View File

@ -2,6 +2,11 @@
@plugin "@iconify/tailwind4"; @plugin "@iconify/tailwind4";
@plugin "@iconify/tailwind4" {
prefix: 'icon-override';
override-only: true;
}
.demo { .demo {
color: var(--color-blue-600); color: var(--color-blue-600);
} }

2
plugins/tailwind/package.json
View File

@ -3,7 +3,7 @@
"description": "Iconify plugin for Tailwind CSS", "description": "Iconify plugin for Tailwind CSS",
"type": "module", "type": "module",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)", "author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "1.0.0", "version": "1.0.1",
"license": "MIT", "license": "MIT",
"main": "./dist/plugin.js", "main": "./dist/plugin.js",
"types": "./dist/plugin.d.ts", "types": "./dist/plugin.d.ts",

55
plugins/tailwind/src/plugin.ts
View File

@ -1,26 +1,55 @@
/* eslint-disable @typescript-eslint/unbound-method */ /* eslint-disable @typescript-eslint/unbound-method */
import plugin from 'tailwindcss/plugin'; import plugin from 'tailwindcss/plugin';
import { getDynamicCSSRules } from './dynamic.js'; import { getDynamicCSSRules } from './dynamic.js';
import type { DynamicIconifyPluginOptions } from './helpers/options.js';
/** /**
* Generate styles for dynamic selector * Generate styles for dynamic selector
* *
* Usage in HTML: <span class="icon-[mdi-light--home]" /> * Usage in HTML: <span class="icon-[mdi-light--home]" />
*/ */
function addDynamicIconSelectors(): ReturnType<typeof plugin> { function addDynamicIconSelectors(): ReturnType<typeof plugin.withOptions> {
const prefix = 'icon'; return plugin.withOptions((params: unknown) => {
return plugin(({ matchComponents }) => { // Clean up options
matchComponents({ const options: DynamicIconifyPluginOptions = {};
[prefix]: (icon: string) => { Object.entries(params ?? {}).forEach(([key, value]) => {
try { switch (key) {
return getDynamicCSSRules(icon); case 'prefix':
} catch (err) { if (typeof value === 'string') {
// Log error, but do not throw it options.prefix = value;
console.error((err as Error).message); }
return {}; 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 {};
}
},
});
};
}); });
} }