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

chore(tailwind): render common selector as component

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2024-05-13 19:53:45 +03:00
parent 9263d9c003
commit e749829523
4 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins-demo/tailwind-demo/src/index.html
View File

@ -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
plugins/tailwind/package.json
View File

@ -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",

26
plugins/tailwind/src/plugin.ts
View File

@ -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));
});
}

53
plugins/tailwind/src/preparsed.ts
View File

@ -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