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:
parent
72aa8aa8d9
commit
bce4af62b2
@ -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
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user