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> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -17,7 +17,8 @@
</span> </span>
</p> </p>
<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="text-3xl demo">
<span class="icon-[custom--spinner1]"></span> <span class="icon-[custom--spinner1]"></span>
<span class="icon-[custom--spinner2]"></span> <span class="icon-[custom--spinner2]"></span>

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

@ -66,6 +66,16 @@ module.exports = {
iconSets: { iconSets: {
custom: customSet.export(), 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 // Plugin with dynamic selectors that contains only css for overriding icon
addDynamicIconSelectors({ 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?` `Cannot load icon set for "${prefix}". Install "@iconify-json/${prefix}" as dev dependency?`
); );
} }
const generated = getIconsCSSData( const generated = getIconsCSSData(
iconSet, iconSet,
Array.from(prefixes[prefix]), Array.from(prefixes[prefix]),
options {
...options,
customise: (content, name) =>
options.customise?.(content, name, prefix) ?? content,
}
); );
const result = generated.common const result = generated.common

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

@ -29,6 +29,8 @@ export function getDynamicCSSRules(
const generated = getIconsCSSData(iconSet, [name], { const generated = getIconsCSSData(iconSet, [name], {
iconSelector: '.icon', iconSelector: '.icon',
customise: (content, name) =>
options.customise?.(content, name, prefix) ?? content,
}); });
if (generated.css.length !== 1) { if (generated.css.length !== 1) {
throw new Error(`Cannot find "${icon}". Bad icon name?`); 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 { IconCSSIconSetOptions } from '@iconify/utils/lib/css/types';
import type { IconifyJSON } from '@iconify/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 // Callback for loading icon set
type IconifyJSONLoaderCallback = () => IconifyJSON; type IconifyJSONLoaderCallback = () => IconifyJSON;
@ -17,6 +24,9 @@ export interface CommonIconifyPluginOptions {
// Custom icon sets // Custom icon sets
// Value can be loaded icon set or callback that loads icon set // Value can be loaded icon set or callback that loads icon set
iconSets?: Record<string, IconifyIconSetSource>; iconSets?: Record<string, IconifyIconSetSource>;
// Replace icon content
customise?: IconifyCustomiseCallback;
} }
/** /**
@ -24,7 +34,7 @@ export interface CommonIconifyPluginOptions {
*/ */
export interface CleanIconifyPluginOptions export interface CleanIconifyPluginOptions
extends CommonIconifyPluginOptions, extends CommonIconifyPluginOptions,
IconCSSIconSetOptions { Omit<IconCSSIconSetOptions, 'customise'> {
// //
} }