diff --git a/plugins-demo/tailwind-demo/src/index.html b/plugins-demo/tailwind-demo/src/index.html index 534cdfa..e798c82 100644 --- a/plugins-demo/tailwind-demo/src/index.html +++ b/plugins-demo/tailwind-demo/src/index.html @@ -37,6 +37,9 @@ +

diff --git a/plugins/tailwind/package.json b/plugins/tailwind/package.json index 3d200e5..b2edb64 100644 --- a/plugins/tailwind/package.json +++ b/plugins/tailwind/package.json @@ -2,7 +2,7 @@ "name": "@iconify/tailwind", "description": "Iconify plugin for Tailwind CSS", "author": "Vjacheslav Trushkin (https://iconify.design)", - "version": "1.1.0", + "version": "1.1.1", "license": "MIT", "main": "./dist/plugin.js", "types": "./dist/plugin.d.ts", diff --git a/plugins/tailwind/src/plugin.ts b/plugins/tailwind/src/plugin.ts index 736e8ed..f166782 100644 --- a/plugins/tailwind/src/plugin.ts +++ b/plugins/tailwind/src/plugin.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: */ 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)); }); } diff --git a/plugins/tailwind/src/preparsed.ts b/plugins/tailwind/src/preparsed.ts index 69df4a8..68ec33d 100644 --- a/plugins/tailwind/src/preparsed.ts +++ b/plugins/tailwind/src/preparsed.ts @@ -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>; - - // 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>; // 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) => { 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>; + + // 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