fix(tailwind): allow custom locations for icon set files

plugins/tailwind/README.md

@@ -13,19 +13,21 @@ This plugin creates CSS for over 100k open source icons.
 
 To use icon in HTML, it is as easy as adding 2 class names:
 
--   Class name for icon set.
--   Class name for icon.
+-   Class name for icon set: `icon--{prefix}`.
+-   Class name for icon: `icon--{prefix}--{name}`.
 
 ```html
 <span class="icon--mdi icon--mdi--home"></span>
 ```
 
-Why 2 class names? It reduces duplication and makes it easy to change all icons from one icon set.
+Why 2 class names? It reduces duplication and makes it easy to target all icons from one icon set.
 
 You can change that with options: you can change class names format, you can disable common selector. See [options for function used by plugin](https://docs.iconify.design/tools/utils/get-icons-css.html).
 
 ### Color, size, alignment
 
+Monoton icons can change color! See [Iconify documentation](https://docs.iconify.design/icon-components/css.html#mask) for longer explanation.
+
 To change icon size or color, change font size or text color, like you would with any text.
 
 Icon color cannot be changed for icons with hardcoded palette, such as most emoji sets or flag icons.
@@ -50,8 +52,6 @@ See [Iconify documentation](https://docs.iconify.design/icons/json.html) for lis
 
 ## Tailwind config
 
-Then you need to add and configure plugin.
-
 Add this to `tailwind.config.js`:
 
 ```js

plugins/tailwind/src/iconify.ts

@@ -2,7 +2,7 @@ import { readFileSync } from 'fs';
 import type { IconifyJSON } from '@iconify/types';
 import { getIconsCSSData } from '@iconify/utils/lib/css/icons';
 import { matchIconName } from '@iconify/utils/lib/icon/name';
-import type { IconifyPluginOptions } from './options';
+import type { IconifyPluginFileOptions, IconifyPluginOptions } from './options';
 
 const missingIconsListError =
 	'TailwindCSS cannot dynamically find all used icons. Need to pass list of used icons to Iconify plugin.';
@@ -10,7 +10,13 @@ const missingIconsListError =
 /**
  * Locate icon set
  */
-function locateIconSet(prefix: string): string | undefined {
+function locateIconSet(
+	prefix: string,
+	options: IconifyPluginFileOptions
+): string | undefined {
+	if (options.files?.[prefix]) {
+		return options.files?.[prefix];
+	}
 	try {
 		return require.resolve(`@iconify-json/${prefix}/icons.json`);
 	} catch {}
@@ -22,8 +28,11 @@ function locateIconSet(prefix: string): string | undefined {
 /**
  * Load icon set
  */
-function loadIconSet(prefix: string): IconifyJSON | undefined {
-	const filename = locateIconSet(prefix);
+function loadIconSet(
+	prefix: string,
+	options: IconifyPluginFileOptions
+): IconifyJSON | undefined {
+	const filename = locateIconSet(prefix, options);
 	if (filename) {
 		try {
 			return JSON.parse(readFileSync(filename, 'utf8'));
@@ -115,7 +124,7 @@ export function getCSSRules(
 
 	// Parse all icon sets
 	for (const prefix in prefixes) {
-		const iconSet = loadIconSet(prefix);
+		const iconSet = loadIconSet(prefix, options);
 		if (!iconSet) {
 			throw new Error(`Cannot load icon set for "${prefix}"`);
 		}

plugins/tailwind/src/options.ts

@@ -1,5 +1,18 @@
 import type { IconCSSIconSetOptions } from '@iconify/utils/lib/css/types';
 
-export interface IconifyPluginOptions extends IconCSSIconSetOptions {
+/**
+ * Options for locating icon sets
+ */
+export interface IconifyPluginFileOptions {
+	// Files
+	files?: Record<string, string>;
+}
+
+/**
+ * All options
+ */
+export interface IconifyPluginOptions
+	extends IconCSSIconSetOptions,
+		IconifyPluginFileOptions {
 	//
 }