mirror of
https://github.com/iconify/iconify.git
synced 2024-09-07 19:19:02 +00:00
chore(tailwind): render common selector as component
This commit is contained in:
parent
9263d9c003
commit
e749829523
@ -37,6 +37,9 @@
|
|||||||
<span
|
<span
|
||||||
class="iconify-nosize mdi-light--home h-12 w-12 text-blue-600"
|
class="iconify-nosize mdi-light--home h-12 w-12 text-blue-600"
|
||||||
></span>
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify mdi-light--home h-12 w-12 text-red-600"
|
||||||
|
></span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="mb-2">
|
<section class="mb-2">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
"name": "@iconify/tailwind",
|
"name": "@iconify/tailwind",
|
||||||
"description": "Iconify plugin for Tailwind CSS",
|
"description": "Iconify plugin for Tailwind CSS",
|
||||||
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
|
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
|
||||||
"version": "1.1.0",
|
"version": "1.1.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "./dist/plugin.js",
|
"main": "./dist/plugin.js",
|
||||||
"types": "./dist/plugin.d.ts",
|
"types": "./dist/plugin.d.ts",
|
||||||
|
@ -6,7 +6,11 @@ import type {
|
|||||||
DynamicIconifyPluginOptions,
|
DynamicIconifyPluginOptions,
|
||||||
IconifyPluginOptions,
|
IconifyPluginOptions,
|
||||||
} from './helpers/options';
|
} from './helpers/options';
|
||||||
import { getCSSRulesForPlugin } from './preparsed';
|
import {
|
||||||
|
cleanupIconifyPluginOptions,
|
||||||
|
getCSSComponentsForPlugin,
|
||||||
|
getCSSRulesForPlugin,
|
||||||
|
} from './preparsed';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Generate styles for dynamic selector
|
* Generate styles for dynamic selector
|
||||||
@ -39,23 +43,11 @@ export function addDynamicIconSelectors(options?: DynamicIconifyPluginOptions) {
|
|||||||
* Usage in HTML: <span class="iconify mdi-light--home" />
|
* Usage in HTML: <span class="iconify mdi-light--home" />
|
||||||
*/
|
*/
|
||||||
export function addIconSelectors(options: IconifyPluginOptions) {
|
export function addIconSelectors(options: IconifyPluginOptions) {
|
||||||
const maskSelector =
|
const fullOptions = cleanupIconifyPluginOptions(options);
|
||||||
'maskSelector' in options ? options.maskSelector : '.iconify';
|
|
||||||
const backgroundSelector =
|
|
||||||
'backgroundSelector' in options
|
|
||||||
? options.backgroundSelector
|
|
||||||
: '.iconify-color';
|
|
||||||
const {
|
|
||||||
[maskSelector]: iconify,
|
|
||||||
[backgroundSelector]: iconifyColor,
|
|
||||||
...icons
|
|
||||||
} = getCSSRulesForPlugin(options);
|
|
||||||
return plugin(({ addComponents, addUtilities }) => {
|
return plugin(({ addComponents, addUtilities }) => {
|
||||||
addComponents({
|
addComponents(getCSSComponentsForPlugin(fullOptions));
|
||||||
[maskSelector]: iconify,
|
addUtilities(getCSSRulesForPlugin(fullOptions));
|
||||||
[backgroundSelector]: iconifyColor,
|
|
||||||
});
|
|
||||||
addUtilities(icons);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,23 +13,29 @@ import type {
|
|||||||
import { loadIconSet } from './helpers/loader';
|
import { loadIconSet } from './helpers/loader';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get CSS rules for main plugin
|
* Convert plugin options to object
|
||||||
*/
|
*/
|
||||||
export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
|
export function cleanupIconifyPluginOptions(
|
||||||
const rules = Object.create(null) as Record<string, Record<string, string>>;
|
options: IconifyPluginOptions
|
||||||
|
): IconifyPluginOptionsObject {
|
||||||
// Convert options to object
|
return Array.isArray(options)
|
||||||
const fullOptions: IconifyPluginOptionsObject = Array.isArray(options)
|
|
||||||
? {
|
? {
|
||||||
prefixes: options,
|
prefixes: options,
|
||||||
}
|
}
|
||||||
: options;
|
: options;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get CSS rules for main plugin (components)
|
||||||
|
*/
|
||||||
|
export function getCSSComponentsForPlugin(options: IconifyPluginOptionsObject) {
|
||||||
|
const rules = Object.create(null) as Record<string, Record<string, string>>;
|
||||||
|
|
||||||
// Variable name, default to 'svg' (cannot be empty string)
|
// Variable name, default to 'svg' (cannot be empty string)
|
||||||
const varName = fullOptions.varName || 'svg';
|
const varName = options.varName || 'svg';
|
||||||
|
|
||||||
// Scale icons
|
// Scale icons
|
||||||
const scale = fullOptions.scale ?? 1;
|
const scale = options.scale ?? 1;
|
||||||
const adjustScale = (obj: Record<string, string>) => {
|
const adjustScale = (obj: Record<string, string>) => {
|
||||||
if (!scale) {
|
if (!scale) {
|
||||||
// Delete width and height
|
// Delete width and height
|
||||||
@ -44,9 +50,8 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Add common rules
|
// Add common rules
|
||||||
const maskSelector = fullOptions.maskSelector ?? '.iconify';
|
const maskSelector = options.maskSelector ?? '.iconify';
|
||||||
const backgroundSelector =
|
const backgroundSelector = options.backgroundSelector ?? '.iconify-color';
|
||||||
fullOptions.backgroundSelector ?? '.iconify-color';
|
|
||||||
if (maskSelector) {
|
if (maskSelector) {
|
||||||
rules[maskSelector] = Object.assign(
|
rules[maskSelector] = Object.assign(
|
||||||
adjustScale(
|
adjustScale(
|
||||||
@ -55,7 +60,7 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
|
|||||||
varName,
|
varName,
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
fullOptions.extraMaskRules || {}
|
options.extraMaskRules || {}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (backgroundSelector) {
|
if (backgroundSelector) {
|
||||||
@ -66,14 +71,26 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
|
|||||||
varName,
|
varName,
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
fullOptions.extraBackgroundRules || {}
|
options.extraBackgroundRules || {}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add icon sets
|
return rules;
|
||||||
const iconSelector = fullOptions.iconSelector || '.{prefix}--{name}';
|
}
|
||||||
|
|
||||||
fullOptions.prefixes?.forEach((item) => {
|
/**
|
||||||
|
* Get CSS rules for main plugin (utilities)
|
||||||
|
*/
|
||||||
|
export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
|
||||||
|
const rules = Object.create(null) as Record<string, Record<string, string>>;
|
||||||
|
|
||||||
|
// Variable name, default to 'svg' (cannot be empty string)
|
||||||
|
const varName = options.varName || 'svg';
|
||||||
|
|
||||||
|
// Add icon sets
|
||||||
|
const iconSelector = options.iconSelector || '.{prefix}--{name}';
|
||||||
|
|
||||||
|
options.prefixes?.forEach((item) => {
|
||||||
let prefix: string;
|
let prefix: string;
|
||||||
let iconSet: IconifyJSON | undefined;
|
let iconSet: IconifyJSON | undefined;
|
||||||
let iconsList: IconsListOption | undefined;
|
let iconsList: IconsListOption | undefined;
|
||||||
@ -131,8 +148,8 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptions) {
|
|||||||
// Customise icon
|
// Customise icon
|
||||||
const body = customise
|
const body = customise
|
||||||
? customise(data.body, name)
|
? customise(data.body, name)
|
||||||
: fullOptions.customise
|
: options.customise
|
||||||
? fullOptions.customise(data.body, name, prefix)
|
? options.customise(data.body, name, prefix)
|
||||||
: data.body;
|
: data.body;
|
||||||
|
|
||||||
// Generate CSS
|
// Generate CSS
|
||||||
|
Loading…
Reference in New Issue
Block a user