diff --git a/plugins-demo/tailwind-demo/package.json b/plugins-demo/tailwind-demo/package.json
index 6c1556c..5e5abe0 100644
--- a/plugins-demo/tailwind-demo/package.json
+++ b/plugins-demo/tailwind-demo/package.json
@@ -9,6 +9,7 @@
},
"keywords": [],
"devDependencies": {
+ "@iconify-json/fa6-regular": "^1.1.21",
"@iconify-json/mdi-light": "^1.1.10",
"@iconify-json/vscode-icons": "^1.1.36",
"@iconify/tailwind": "workspace:*",
diff --git a/plugins-demo/tailwind-demo/src/index.html b/plugins-demo/tailwind-demo/src/index.html
index e798c82..57fc069 100644
--- a/plugins-demo/tailwind-demo/src/index.html
+++ b/plugins-demo/tailwind-demo/src/index.html
@@ -41,6 +41,12 @@
class="iconify mdi-light--home h-12 w-12 text-red-600"
>
+
+ Scaled non-square icons:
+
+
Dynamic selectors plugin, custom options
diff --git a/plugins-demo/tailwind-demo/tailwind.config.js b/plugins-demo/tailwind-demo/tailwind.config.js
index 38b00a0..45f7485 100644
--- a/plugins-demo/tailwind-demo/tailwind.config.js
+++ b/plugins-demo/tailwind-demo/tailwind.config.js
@@ -91,6 +91,15 @@ module.exports = {
scale: 0,
// No prefixes list: reusing data from plugin above
}),
+ // Main plugin, no square and scale
+ addIconSelectors({
+ maskSelector: '.fa6-mask',
+ backgroundSelector: '.fa6-bg', // unused
+ iconSelector: '.{prefix}-{name}',
+ square: false,
+ scale: 2,
+ prefixes: ['fa6-regular'],
+ }),
// Plugin with clean selectors: requires writing all used icons in first parameter
addCleanIconSelectors(['mdi-light:home']),
// Plugin with dynamic selectors
diff --git a/plugins/tailwind/.eslintignore b/plugins/tailwind/.eslintignore
new file mode 100644
index 0000000..5f37ca5
--- /dev/null
+++ b/plugins/tailwind/.eslintignore
@@ -0,0 +1,2 @@
+lib
+dist
diff --git a/plugins/tailwind/.eslintrc.cjs b/plugins/tailwind/.eslintrc.cjs
new file mode 100644
index 0000000..f559331
--- /dev/null
+++ b/plugins/tailwind/.eslintrc.cjs
@@ -0,0 +1,33 @@
+module.exports = {
+ env: {
+ browser: true,
+ es6: true,
+ node: true,
+ },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:@typescript-eslint/recommended-requiring-type-checking',
+ 'plugin:prettier/recommended',
+ ],
+ globals: {
+ Atomics: 'readonly',
+ SharedArrayBuffer: 'readonly',
+ },
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['tsconfig.json', 'tests/tsconfig.json'],
+ extraFileExtensions: ['.cjs'],
+ },
+ plugins: ['@typescript-eslint'],
+ rules: {
+ 'no-mixed-spaces-and-tabs': ['off'],
+ 'no-unused-vars': ['off'],
+ },
+ overrides: [
+ {
+ files: ['src/**/*.ts', 'tests/*.ts'],
+ },
+ ],
+};
diff --git a/plugins/tailwind/package.json b/plugins/tailwind/package.json
index f1b8d3a..171a93d 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.1",
+ "version": "1.1.2",
"license": "MIT",
"main": "./dist/plugin.js",
"types": "./dist/plugin.d.ts",
diff --git a/plugins/tailwind/src/helpers/loader.ts b/plugins/tailwind/src/helpers/loader.ts
index 9c64e50..66f6307 100644
--- a/plugins/tailwind/src/helpers/loader.ts
+++ b/plugins/tailwind/src/helpers/loader.ts
@@ -19,7 +19,9 @@ export function locateIconSet(prefix: string): LocatedIconSet | undefined {
main,
info,
};
- } catch {}
+ } catch {
+ //
+ }
// Try `@iconify/json`
try {
@@ -27,7 +29,9 @@ export function locateIconSet(prefix: string): LocatedIconSet | undefined {
return {
main,
};
- } catch {}
+ } catch {
+ //
+ }
}
/**
@@ -45,13 +49,19 @@ const cache = Object.create(null) as Record;
*/
function loadIconSetFromFile(source: LocatedIconSet): IconifyJSON | undefined {
try {
- const result = JSON.parse(readFileSync(source.main, 'utf8'));
+ const result = JSON.parse(
+ readFileSync(source.main, 'utf8')
+ ) as IconifyJSON;
if (!result.info && source.info) {
// Load info from a separate file
- result.info = JSON.parse(readFileSync(source.info, 'utf8'));
+ result.info = JSON.parse(
+ readFileSync(source.info, 'utf8')
+ ) as IconifyJSON['info'];
}
return result;
- } catch {}
+ } catch {
+ //
+ }
}
/**
@@ -75,7 +85,7 @@ export function loadIconSet(
// Try to parse JSON
if (source.startsWith('{')) {
try {
- return JSON.parse(source);
+ return JSON.parse(source) as IconifyJSON;
} catch {
// Invalid JSON
}
diff --git a/plugins/tailwind/src/helpers/options.ts b/plugins/tailwind/src/helpers/options.ts
index 842bfbb..7933283 100644
--- a/plugins/tailwind/src/helpers/options.ts
+++ b/plugins/tailwind/src/helpers/options.ts
@@ -94,6 +94,9 @@ export interface IconifyPluginOptionsObject {
// Scale for icons, defaults to 1
scale?: number;
+ // Make icons square, defaults to true
+ square?: boolean;
+
// Prefixes to load
prefixes?: IconifyPluginListOptions;
diff --git a/plugins/tailwind/src/plugin.ts b/plugins/tailwind/src/plugin.ts
index f166782..04fc77b 100644
--- a/plugins/tailwind/src/plugin.ts
+++ b/plugins/tailwind/src/plugin.ts
@@ -26,7 +26,7 @@ export function addDynamicIconSelectors(options?: DynamicIconifyPluginOptions) {
return getDynamicCSSRules(icon, options);
} catch (err) {
// Log error, but do not throw it
- console.error(err.message);
+ console.error((err as Error).message);
}
},
});
diff --git a/plugins/tailwind/src/preparsed.ts b/plugins/tailwind/src/preparsed.ts
index 68ec33d..e4c9e01 100644
--- a/plugins/tailwind/src/preparsed.ts
+++ b/plugins/tailwind/src/preparsed.ts
@@ -5,6 +5,7 @@ import {
} from '@iconify/utils/lib/css/common';
import { defaultIconProps } from '@iconify/utils/lib/icon/defaults';
import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
+import { calculateSize } from '@iconify/utils/lib/svg/size';
import type {
IconifyPluginOptions,
IconifyPluginOptionsObject,
@@ -90,6 +91,12 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
// Add icon sets
const iconSelector = options.iconSelector || '.{prefix}--{name}';
+ // Make icons square
+ const square = options.square !== false;
+
+ // Scale
+ const scale = options.scale ?? 1;
+
options.prefixes?.forEach((item) => {
let prefix: string;
let iconSet: IconifyJSON | undefined;
@@ -162,7 +169,7 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
{
mode: 'mask', // not used because varName is set, but required
varName,
- forceSquare: true,
+ forceSquare: square,
}
);
@@ -171,6 +178,11 @@ export function getCSSRulesForPlugin(options: IconifyPluginOptionsObject) {
.replace('{prefix}', prefix)
.replace('{name}', name);
+ // Scale non-square icons
+ if (!square && scale > 0 && scale !== 1 && iconRules.width) {
+ iconRules.width = calculateSize(iconRules.width, scale);
+ }
+
// Add to rules
rules[selector] = iconRules;
});
diff --git a/plugins/tailwind/tsconfig.json b/plugins/tailwind/tsconfig.json
index 2db517c..dde8149 100644
--- a/plugins/tailwind/tsconfig.json
+++ b/plugins/tailwind/tsconfig.json
@@ -1,6 +1,6 @@
{
"extends": "./tsconfig-base.json",
- "include": ["src/**/*.ts", ".eslintrc.js"],
+ "include": ["src/**/*.ts", ".eslintrc.cjs"],
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b9cca6..c762e69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -832,6 +832,9 @@ importers:
plugins-demo/tailwind-demo:
devDependencies:
+ '@iconify-json/fa6-regular':
+ specifier: ^1.1.21
+ version: 1.1.21
'@iconify-json/mdi-light':
specifier: ^1.1.10
version: 1.1.10
@@ -2639,6 +2642,9 @@ packages:
'@iconify-icons/uil@1.2.3':
resolution: {integrity: sha512-+UlrTCKJ13k8MdZdBJUdJLwrys6r8/BG3MT+C09Vcqbzh5IKGxS9RdJ7G3XeTn+H2MrIJ/EHWCNNUANlDqLk6A==}
+ '@iconify-json/fa6-regular@1.1.21':
+ resolution: {integrity: sha512-xgKt8d9AeMXKc1gfaUUqhYpDZjmC++e6ETsNyW6G0g8n7m2pUsnlpiTDUXGEtalVt6zl7M+HSU9RKrq4ma0rHg==}
+
'@iconify-json/flat-color-icons@1.1.10':
resolution: {integrity: sha512-tkkxTEPMYqDtss8tFij/gWfwrnt/NeChZoUGr6l71sWi7jYMwD35dYjFhM2bjtww5MCkVIAJaVx/3QJGUmMD/g==}
@@ -11600,6 +11606,10 @@ snapshots:
dependencies:
'@iconify/types': 2.0.0
+ '@iconify-json/fa6-regular@1.1.21':
+ dependencies:
+ '@iconify/types': 2.0.0
+
'@iconify-json/flat-color-icons@1.1.10':
dependencies:
'@iconify/types': 2.0.0