chore: add unplugin demo

iconify · Sep 2, 2024 · 41eae45 · 41eae45
1 parent 7ea29e2
commit 41eae45
Show file tree

Hide file tree

Showing 11 changed files with 833 additions and 6 deletions.
diff --git a/@iconify-demo/unplugin/assets/svg-animated/loading.svg b/@iconify-demo/unplugin/assets/svg-animated/loading.svg
diff --git a/@iconify-demo/unplugin/assets/svg-animated/loading2.svg b/@iconify-demo/unplugin/assets/svg-animated/loading2.svg
diff --git a/@iconify-demo/unplugin/assets/svg-ion/accessibility.svg b/@iconify-demo/unplugin/assets/svg-ion/accessibility.svg
diff --git a/@iconify-demo/unplugin/assets/svg-ion/balloon-outline.svg b/@iconify-demo/unplugin/assets/svg-ion/balloon-outline.svg
diff --git a/@iconify-demo/unplugin/assets/svg-ion/build.svg b/@iconify-demo/unplugin/assets/svg-ion/build.svg
diff --git a/@iconify-demo/unplugin/index.html b/@iconify-demo/unplugin/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="./src/main.ts"></script>
+	</body>
+</html>
diff --git a/@iconify-demo/unplugin/package.json b/@iconify-demo/unplugin/package.json
@@ -0,0 +1,23 @@
+{
+	"name": "@iconify-demo/unplugin",
+	"type": "module",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"vue": "^3.4.38"
+	},
+	"devDependencies": {
+		"@iconify/tools": "workspace:^",
+		"@vitejs/plugin-vue": "^5.1.3",
+		"typescript": "^5.5.4",
+		"unconfig": "^0.4.5",
+		"unplugin-icons": "^0.18.5",
+		"unplugin-vue-components": "^0.27.4",
+		"vite": "^5.4.2"
+	}
+}
diff --git a/@iconify-demo/unplugin/src/App.vue b/@iconify-demo/unplugin/src/App.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import LoadingIcon from '~icons/svg-animated/loading';
+import LoadingIcon2 from '~icons/svg-animated/loading2';
+import BuildIcon from '~icons/svg-ion/build';
+import AccessibilityIcon from '~icons/svg-ion/accessibility';
+</script>
+<template>
+	<main>
+		<h1>Unplugin Icons demo</h1>
+		<p>
+			Custom icons with `svg-ion` prefix:
+			<BuildIcon /><AccessibilityIcon />
+		</p>
+		<p>Custom animated icons: <LoadingIcon /><LoadingIcon2 /></p>
+		<p>Icons use text color, hover icon to see color change</p>
+	</main>
+</template>
+
+<style>
+main {
+	font-size: 16px;
+	line-height: 1.5;
+}
+h1 {
+	font-size: 22px;
+}
+p {
+	font: inherit;
+}
+p svg {
+	vertical-align: -0.25em;
+}
+p:hover {
+	color: rgb(8, 98, 172);
+}
+p svg:hover {
+	color: rgb(211, 15, 15);
+}
+</style>
diff --git a/@iconify-demo/unplugin/src/main.ts b/@iconify-demo/unplugin/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/@iconify-demo/unplugin/vite.config.ts b/@iconify-demo/unplugin/vite.config.ts
@@ -0,0 +1,130 @@
+import type { UserConfig } from 'vite';
+import Vue from '@vitejs/plugin-vue';
+import Icons from 'unplugin-icons/vite';
+import { promises as fs } from 'fs';
+import { compareColors, stringToColor } from '@iconify/utils/lib/colors';
+import {
+	SVG,
+	cleanupSVG,
+	parseColors,
+	runSVGO,
+	deOptimisePaths,
+	importDirectorySync,
+} from '@iconify/tools';
+
+const assetsRootDir = 'assets';
+
+const config: UserConfig = {
+	plugins: [
+		Vue(),
+		Icons({
+			compiler: 'vue3',
+			scale: 1.5,
+			customCollections: {
+				// Load an entire icon set
+				'svg-animated': () => {
+					// Load icons
+					const iconSet = importDirectorySync(
+						assetsRootDir + '/svg-animated',
+						{
+							prefix: 'svg-animated',
+						}
+					);
+
+					// Clean up each icon
+					iconSet.forEachSync((name) => {
+						const svg = iconSet.toSVG(name);
+						if (!svg) {
+							return;
+						}
+
+						// Change color to `currentColor`
+						const blackColor = stringToColor('black');
+
+						parseColors(svg, {
+							defaultColor: 'currentColor',
+							callback: (attr, colorStr, color) => {
+								// console.log('Color:', colorStr, color);
+
+								// Change black to 'currentColor'
+								if (color && compareColors(color, blackColor)) {
+									return 'currentColor';
+								}
+
+								switch (color?.type) {
+									case 'none':
+									case 'current':
+										return color;
+								}
+
+								throw new Error(
+									`Unexpected color "${colorStr}" in attribute ${attr}`
+								);
+							},
+						});
+
+						// Optimise, but do not change shapes because they are animated
+						runSVGO(svg, {
+							keepShapes: true,
+						});
+
+						// Update icon in icon set
+						iconSet.fromSVG(name, svg);
+					});
+
+					// Export as IconifyJSON
+					return iconSet.export();
+				},
+
+				// Load icon one by one on demand
+				'svg-ion': async (name) => {
+					// Load icon
+					const filename = `${assetsRootDir}/svg-ion/${name}.svg`;
+					const content = await fs.readFile(filename, 'utf8');
+					const svg = new SVG(content);
+
+					// Clean up icon
+					cleanupSVG(svg);
+
+					// Change color to `currentColor`
+					const blackColor = stringToColor('black');
+
+					parseColors(svg, {
+						defaultColor: 'currentColor',
+						callback: (attr, colorStr, color) => {
+							// console.log('Color:', colorStr, color);
+
+							// Change black to 'currentColor'
+							if (color && compareColors(color, blackColor)) {
+								return 'currentColor';
+							}
+
+							switch (color?.type) {
+								case 'none':
+								case 'current':
+									return color;
+							}
+
+							throw new Error(
+								`Unexpected color "${colorStr}" in attribute ${attr}`
+							);
+						},
+					});
+
+					// Optimise
+					runSVGO(svg);
+
+					// Update paths for compatibility with old software
+					deOptimisePaths(svg);
+
+					// Return icon
+					// First parameter must be set to change height to '1em' !
+					return svg.toMinifiedString({});
+				},
+			},
+			// TypeScript shenanigans
+		}) as ReturnType<typeof Vue>,
+	],
+};
+
+export default config;