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