agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-16 09:37:09 +00:00
Code Issues Releases Activity

chore(tailwind): add customise option

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2024-05-06 22:43:28 +03:00
parent 7f0454faf0
commit 3365d71a42
5 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins-demo/tailwind-demo/src/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
@ -17,7 +17,8 @@
</span>
</p>
<p>
Custom icons, imported from "svg" directory:
Custom icons, imported from "svg" directory (first icon's animation
slowed down using "customise" option):
<span class="text-3xl demo">
<span class="icon-[custom--spinner1]"></span>
<span class="icon-[custom--spinner2]"></span>

10
plugins-demo/tailwind-demo/tailwind.config.js
View File

@ -66,6 +66,16 @@ module.exports = {
iconSets: {
custom: customSet.export(),
},
customise: (content, name, prefix) => {
switch (name) {
case 'spinner1':
return content.replace(
'animation:0.75s',
'animation:5s'
);
}
return content;
},
}),
// Plugin with dynamic selectors that contains only css for overriding icon
addDynamicIconSelectors({

7
plugins/tailwind/src/clean.ts
View File

@ -23,10 +23,15 @@ export function getCSSRulesForIcons(
`Cannot load icon set for "${prefix}". Install "@iconify-json/${prefix}" as dev dependency?`
);
}
const generated = getIconsCSSData(
iconSet,
Array.from(prefixes[prefix]),
options
{
...options,
customise: (content, name) =>
options.customise?.(content, name, prefix) ?? content,
}
);
const result = generated.common

2
plugins/tailwind/src/dynamic.ts
View File

@ -29,6 +29,8 @@ export function getDynamicCSSRules(
const generated = getIconsCSSData(iconSet, [name], {
iconSelector: '.icon',
customise: (content, name) =>
options.customise?.(content, name, prefix) ?? content,
});
if (generated.css.length !== 1) {
throw new Error(`Cannot find "${icon}". Bad icon name?`);

12
plugins/tailwind/src/helpers/options.ts
View File

@ -1,6 +1,13 @@
import type { IconCSSIconSetOptions } from '@iconify/utils/lib/css/types';
import type { IconifyJSON } from '@iconify/types';
// Callback for customising icon
type IconifyCustomiseCallback = (
content: string,
name: string,
prefix: string
) => string;
// Callback for loading icon set
type IconifyJSONLoaderCallback = () => IconifyJSON;
@ -17,6 +24,9 @@ export interface CommonIconifyPluginOptions {
// Custom icon sets
// Value can be loaded icon set or callback that loads icon set
iconSets?: Record<string, IconifyIconSetSource>;
// Replace icon content
customise?: IconifyCustomiseCallback;
}
/**
@ -24,7 +34,7 @@ export interface CommonIconifyPluginOptions {
*/
export interface CleanIconifyPluginOptions
extends CommonIconifyPluginOptions,
IconCSSIconSetOptions {
Omit<IconCSSIconSetOptions, 'customise'> {
//
}