chore(tailwind): add custom icons to tailwind demo

plugins-demo/tailwind-demo/package.json

@@ -10,8 +10,9 @@
 	"keywords": [],
 	"devDependencies": {
 		"@iconify-json/mdi-light": "^1.1.6",
-		"@iconify-json/vscode-icons": "^1.1.22",
+		"@iconify-json/vscode-icons": "^1.1.24",
 		"@iconify/tailwind": "workspace:*",
+		"@iconify/tools": "3.0.0-beta.3",
 		"tailwindcss": "^3.3.1"
 	}
 }

plugins-demo/tailwind-demo/src/index.html

@@ -16,6 +16,13 @@
 				<span class="icon-[mdi-light--forum]"></span>
 			</span>
 		</p>
+		<p>
+			Custom icons, imported from "svg" directory:
+			<span class="text-3xl demo">
+				<span class="icon-[custom--spinner1]"></span>
+				<span class="icon-[custom--spinner2]"></span>
+			</span>
+		</p>
 		<p>
 			Icons with hardcoded palette:
 			<span class="text-3xl demo">

plugins-demo/tailwind-demo/svg/spinner1.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <style>
+        .spin-path {
+            animation: 0.75s linear infinite rotate;
+            transform-origin: center;
+        }
+        @keyframes rotate {
+            from {
+                transform: rotate(0deg)
+            }
+            to {
+                transform: rotate(360deg)
+            }
+        }
+    </style>
+    <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
+    <path class="spin-path" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" />
+</svg>

plugins-demo/tailwind-demo/svg/spinner2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0">
+        <animateTransform attributeName="transform" calcMode="discrete" dur="2.4s" repeatCount="indefinite" type="rotate" values="0 12 12;90 12 12;180 12 12;270 12 12"/>
+        <animate attributeName="opacity" dur="0.6s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/>
+    </circle>
+    <circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0">
+        <animateTransform attributeName="transform" begin="0.2s" calcMode="discrete" dur="2.4s" repeatCount="indefinite" type="rotate" values="30 12 12;120 12 12;210 12 12;300 12 12"/>
+        <animate attributeName="opacity" begin="0.2s" dur="0.6s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/>
+    </circle>
+    <circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0">
+        <animateTransform attributeName="transform" begin="0.4s" calcMode="discrete" dur="2.4s" repeatCount="indefinite" type="rotate" values="60 12 12;150 12 12;240 12 12;330 12 12"/>
+        <animate attributeName="opacity" begin="0.4s" dur="0.6s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/>
+    </circle>
+</svg>

plugins-demo/tailwind-demo/tailwind.config.js

@@ -2,6 +2,58 @@ const {
 	addCleanIconSelectors,
 	addDynamicIconSelectors,
 } = require('@iconify/tailwind');
+const {
+	importDirectorySync,
+	cleanupSVG,
+	parseColorsSync,
+	runSVGO,
+	isEmptyColor,
+} = require('@iconify/tools');
+
+// Import icons from directory 'svg'
+const customSet = importDirectorySync('svg');
+
+// Clean up all icons
+customSet.forEachSync((name, type) => {
+	if (type !== 'icon') {
+		return;
+	}
+
+	// Get SVG object for icon
+	const svg = customSet.toSVG(name);
+	if (!svg) {
+		// Invalid icon
+		customSet.remove(name);
+		return;
+	}
+
+	try {
+		// Clean up icon
+		cleanupSVG(svg);
+
+		// This is a monotone icon, change color to `currentColor`, add it if missing
+		// Skip this step if icons have palette
+		parseColorsSync(svg, {
+			defaultColor: 'currentColor',
+			callback: (attr, colorStr, color) => {
+				return !color || isEmptyColor(color)
+					? colorStr
+					: 'currentColor';
+			},
+		});
+
+		// Optimise icon
+		runSVGO(svg);
+	} catch (err) {
+		// Something went wrong when parsing icon: remove it
+		console.error(`Error parsing ${name}:`, err);
+		customSet.remove(name);
+		return;
+	}
+
+	// Update icon in icon set from SVG object
+	customSet.fromSVG(name, svg);
+});
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -10,7 +62,11 @@ module.exports = {
 		// Plugin with clean selectors: requires writing all used icons in first parameter
 		addCleanIconSelectors(['mdi-light:home']),
 		// Plugin with dynamic selectors
-		addDynamicIconSelectors(),
+		addDynamicIconSelectors({
+			iconSets: {
+				custom: customSet.export(),
+			},
+		}),
 		// Plugin with dynamic selectors that contains only css for overriding icon
 		addDynamicIconSelectors({
 			prefix: 'icon-hover',