agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-04 18:23:17 +00:00
Code Issues Releases Activity

Add scale option to tailwind plugin

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import type { DynamicIconifyPluginOptions } from './options';
*/
export function getDynamicCSSRules(
icon: string,
options: DynamicIconifyPluginOptions = {}
{ scale = 1, ...options }: DynamicIconifyPluginOptions = {}
): Record<string, string> {
const nameParts = icon.split(/--|\:/);
if (nameParts.length !== 2) {
@ -34,6 +34,14 @@ export function getDynamicCSSRules(
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 {
// Common rules
...(options.overrideOnly || !generated.common?.rules

3
plugins/tailwind/src/options.ts
View File

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

36
plugins/tailwind/tests/dynamic-css-test.ts
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', () => {
let threw = false;
try {