feat: fetch raw iconify svg to make them color-reactive

antfu · antfu · commit 07200ec2edf2 · 2025-12-24T16:11:50.000+09:00
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.0.0-alpha.22",
   "private": true,
-  "packageManager": "pnpm@10.26.1",
+  "packageManager": "pnpm@10.26.2",
   "scripts": {
     "build": "turbo run build",
     "build:debug": "NUXT_DEBUG_BUILD=true pnpm -r run build",
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -76,6 +76,7 @@
     "@vitejs/plugin-vue": "catalog:build",
     "@xterm/addon-fit": "catalog:frontend",
     "@xterm/xterm": "catalog:frontend",
+    "dompurify": "catalog:frontend",
     "tsdown": "catalog:build",
     "typescript": "catalog:devtools",
     "unplugin-vue": "catalog:build",
diff --git a/packages/core/src/client/webcomponents/.generated/css.ts b/packages/core/src/client/webcomponents/.generated/css.ts
diff --git a/packages/core/src/client/webcomponents/components/DockIcon.vue b/packages/core/src/client/webcomponents/components/DockIcon.vue
@@ -1,47 +1,33 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import IconifyIcon from './IconifyIcon.vue'
 import VitePlusCore from './icons/VitePlusCore.vue'
 
 const props = defineProps<{
   icon: string | { dark: string, light: string }
   title?: string
 }>()
 
-function getIconUrl(str: string, color: 'dark' | 'light') {
-  if (str.includes('/') || str.startsWith('data:') || str.startsWith('builtin:'))
-    return str
-  const match = str.match(/^([\w-]+):([\w-]+)$/)
-  if (match) {
-    const [, collection, icon] = match
-    return `https://api.iconify.design/${collection}/${icon}.svg${color === 'dark' ? '?color=%23eee' : '?color=%23111'}`
-  }
-  return str
-}
-
 const icon = computed(() => {
   if (typeof props.icon === 'string') {
     return {
-      dark: getIconUrl(props.icon, 'dark'),
-      light: getIconUrl(props.icon, 'light'),
+      dark: props.icon,
+      light: props.icon,
     }
   }
-  return {
-    dark: getIconUrl(props.icon.dark, 'dark'),
-    light: getIconUrl(props.icon.light, 'light'),
-  }
+  return props.icon
 })
 </script>
 
 <template>
   <VitePlusCore v-if="icon.light === 'builtin:vite-plus-core'" />
-  <picture v-else>
-    <source :srcset="icon.dark" media="(prefers-color-scheme: dark)">
-    <source :srcset="icon.light" media="(prefers-color-scheme: light)">
-    <img
-      :src="icon.light"
-      :alt="title"
-      class="w-full h-full m-auto"
-      draggable="false"
-    >
-  </picture>
+  <div v-else>
+    <template v-if="icon.light === icon.dark">
+      <IconifyIcon :icon="icon.light" :title="title" />
+    </template>
+    <template v-else>
+      <IconifyIcon class="dark-hidden" :icon="icon.light" :title="title" />
+      <IconifyIcon class="light-hidden" :icon="icon.dark" :title="title" />
+    </template>
+  </div>
 </template>
diff --git a/packages/core/src/client/webcomponents/components/IconifyIcon.vue b/packages/core/src/client/webcomponents/components/IconifyIcon.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import { getIconifySvg } from '../utils/iconify'
+
+const props = defineProps<{
+  icon: string
+}>()
+
+const isUrlIcon = computed(() => props.icon.includes('/') || props.icon.startsWith('data:') || props.icon.startsWith('builtin:'))
+const iconifyParsed = computed(() => {
+  if (isUrlIcon.value)
+    return undefined
+  const match = props.icon.match(/^([\w-]+):([\w-]+)$/)
+  if (!match)
+    return undefined
+  return {
+    collection: match[1]!,
+    icon: match[2]!,
+  }
+})
+
+const iconifyLoaded = ref<string | undefined>(undefined)
+watchEffect(async () => {
+  if (!iconifyParsed.value) {
+    iconifyLoaded.value = undefined
+    return
+  }
+  iconifyLoaded.value = await getIconifySvg(iconifyParsed.value.collection, iconifyParsed.value.icon)
+})
+</script>
+
+<template>
+  <div
+    v-if="iconifyParsed"
+    v-html="iconifyLoaded"
+  />
+  <img
+    v-else :src="icon"
+    class="w-full h-full m-auto"
+    draggable="false"
+  >
+</template>
diff --git a/packages/core/src/client/webcomponents/style.css b/packages/core/src/client/webcomponents/style.css
@@ -19,7 +19,7 @@
 
 #vite-devtools-anchor #vite-devtools-dock {
   --uno: h-full rounded-full select-none touch-none ma h-[40px];
-  --uno: shadow text-white bg-glass;
+  --uno: "shadow text-[#333] dark:text-white  bg-glass";
   --uno: transition-all duration-500;
   width: calc-size(max-content, size);
 }
diff --git a/packages/core/src/client/webcomponents/uno.config.ts b/packages/core/src/client/webcomponents/uno.config.ts
@@ -26,6 +26,24 @@ export default defineConfig({
   transformers: [
     transformerDirectives(),
   ],
+  theme: {
+    colors: {
+      primary: {
+        50: '#fcf4ff',
+        100: '#f7e5ff',
+        200: '#f0d0ff',
+        300: '#e5acff',
+        400: '#d577ff',
+        DEFAULT: '#d577ff',
+        500: '#c543ff',
+        600: '#bd34fe',
+        700: '#9f0fe1',
+        800: '#8512b7',
+        900: '#6d1093',
+        950: '#4d006e',
+      },
+    },
+  },
   presets: [
     presetWind3({
       dark: 'media',
diff --git a/packages/core/src/client/webcomponents/utils/iconify.ts b/packages/core/src/client/webcomponents/utils/iconify.ts
@@ -0,0 +1,25 @@
+import createDOMPurify from 'dompurify'
+
+const getIconifySvgMap = new Map<string, Promise<string> | string>()
+
+const purify = createDOMPurify()
+
+export async function getIconifySvg(collection: string, icon: string) {
+  const id = `${collection}:${icon}`
+  if (getIconifySvgMap.has(id)) {
+    return getIconifySvgMap.get(id)!
+  }
+  const promise = _get()
+    .then((svg) => {
+      getIconifySvgMap.set(id, svg)
+      return svg
+    })
+  getIconifySvgMap.set(id, promise)
+  return promise
+
+  async function _get() {
+    const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=full`
+    const svg = await fetch(url).then(res => res.text())
+    return purify.sanitize(svg)
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`
`20`	`20`	`#vite-devtools-anchor #vite-devtools-dock {`
`21`	`21`	`--uno: h-full rounded-full select-none touch-none ma h-[40px];`
`22`		`- --uno: shadow text-white bg-glass;`
	`22`	`+ --uno: "shadow text-[#333] dark:text-white bg-glass";`
`23`	`23`	`--uno: transition-all duration-500;`
`24`	`24`	`width: calc-size(max-content, size);`
`25`	`25`	`}`