2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-05 02:33:16 +00:00

Add scale option to tailwind plugin

This commit is contained in:
JB Hutch 2023-11-24 11:42:55 -05:00
parent 72aa8aa8d9
commit bce4af62b2
3 changed files with 48 additions and 1 deletions

View File

@ -8,7 +8,7 @@ import type { DynamicIconifyPluginOptions } from './options';
*/ */
export function getDynamicCSSRules( export function getDynamicCSSRules(
icon: string, icon: string,
options: DynamicIconifyPluginOptions = {} { scale = 1, ...options }: DynamicIconifyPluginOptions = {}
): Record<string, string> { ): Record<string, string> {
const nameParts = icon.split(/--|\:/); const nameParts = icon.split(/--|\:/);
if (nameParts.length !== 2) { if (nameParts.length !== 2) {
@ -34,6 +34,14 @@ export function getDynamicCSSRules(
throw new Error(`Cannot find "${icon}". Bad icon name?`); throw new Error(`Cannot find "${icon}". Bad icon name?`);
} }
if (scale) {
generated.common.rules.height = scale + 'em'
generated.common.rules.width = scale + 'em'
} else {
delete generated.common.rules.height
delete generated.common.rules.width
}
return { return {
// Common rules // Common rules
...(options.overrideOnly || !generated.common?.rules ...(options.overrideOnly || !generated.common?.rules

View File

@ -27,4 +27,7 @@ export interface DynamicIconifyPluginOptions
// Include icon-specific selectors only // Include icon-specific selectors only
overrideOnly?: true; overrideOnly?: true;
// Scale relative to the the default value, (ex. scale: 2 = 2em). Set to 0 to disable default value.
scale?: number
} }

View File

@ -29,6 +29,42 @@ describe('Testing dynamic CSS rules', () => {
}); });
}); });
it('Scale appropriate sets height/width default value', () => {
const data = getDynamicCSSRules('mdi-light--home', {
scale: 2,
});
expect(data).toEqual({
'display': 'inline-block',
'width': '2em',
'height': '2em',
'background-color': 'currentColor',
'-webkit-mask-image': 'var(--svg)',
'mask-image': 'var(--svg)',
'-webkit-mask-repeat': 'no-repeat',
'mask-repeat': 'no-repeat',
'-webkit-mask-size': '100% 100%',
'mask-size': '100% 100%',
'--svg': data['--svg'],
});
});
it('Scale removes default value', () => {
const data = getDynamicCSSRules('mdi-light--home', {
scale: 0,
});
expect(data).toEqual({
'display': 'inline-block',
'background-color': 'currentColor',
'-webkit-mask-image': 'var(--svg)',
'mask-image': 'var(--svg)',
'-webkit-mask-repeat': 'no-repeat',
'mask-repeat': 'no-repeat',
'-webkit-mask-size': '100% 100%',
'mask-size': '100% 100%',
'--svg': data['--svg'],
});
});
it('Missing icon', () => { it('Missing icon', () => {
let threw = false; let threw = false;
try { try {