feat: upgrade to shadow-dom approach iconify-icon

package.json

@@ -26,13 +26,13 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@iconify/iconify": "^2.2.1",
     "@vueuse/core": "^9.1.0",
     "copy-text-to-clipboard": "^3.0.1",
     "dexie": "^3.2.2",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
     "hotkeys-js": "^3.9.4",
+    "iconify-icon": "1.0.0-beta.2",
     "vue": "3.2.37",
     "vue-chemistry": "^0.2.2",
     "vue-router": "4.1.3"

scripts/prepare.ts

@@ -66,18 +66,6 @@ async function prepareJSON() {
 async function copyLibs() {
   const modules = path.resolve(__dirname, '../node_modules')
 
-  await fs.copy(
-    path.join(modules, '@iconify/iconify/dist/'),
-    path.join(out, 'lib'),
-    {
-      filter: (src) => {
-        if (fs.lstatSync(src).isDirectory())
-          return true
-        const basename = path.basename(src)
-        return basename.startsWith('iconify') && basename.endsWith('.min.js')
-      },
-    },
-  )
   await fs.copy(
     path.join(modules, 'svg-packer/dist/index.browser.js'),
     path.join(out, 'lib/svg-packer.js'),

src/components/Icon.vue

@@ -1,44 +1,14 @@
 <script setup lang="ts">
-import Iconify from '@purge-icons/generated'
-
-const props = defineProps({
+const { icon } = defineProps({
   icon: {
     type: String,
     required: true,
   },
 })
-
-const el = ref<HTMLElement | null>(null)
-
-const update = async () => {
-  await nextTick()
-  if (el.value) {
-    const svg = Iconify.renderSVG(props.icon, {})
-    if (svg) {
-      el.value.textContent = ''
-      el.value.appendChild(svg)
-    }
-    else {
-      const span = document.createElement('span')
-      span.className = 'iconify'
-      span.dataset.icon = props.icon
-      el.value.textContent = ''
-      el.value.appendChild(span)
-    }
-  }
-}
-
-watch(
-  () => props.icon,
-  update,
-  { flush: 'post' },
-)
-
-onMounted(update)
 </script>
 
 <template>
-  <div ref="el" :class="$attrs.class" />
+  <iconify-icon :icon="icon" :class="$attrs.class" mode="style" />
 </template>
 
 <style>

src/data/index.ts

@@ -1,6 +1,6 @@
-import type { IconifyJSON } from '@iconify/iconify'
+import type { IconifyJSON } from 'iconify-icon'
 import { notNullish } from '@antfu/utils'
-import Iconify from '@purge-icons/generated'
+import { addCollection } from 'iconify-icon'
 import { favoritedIds, inProgress, isFavorited, isRecent, progressMessage, recentIds } from '../store'
 import { isLocalMode, staticPath } from '../env'
 import { loadCollection, saveCollection } from '../store/indexedDB'
@@ -54,7 +54,7 @@ export const isMetaLoaded = (id: string) => !!loadedMeta.value.find(i => i.id ==
 export function preInstall() {
   for (const collection of collections) {
     if (collection.prepacked)
-      Iconify.addCollection(collection.prepacked as any)
+      addCollection(collection.prepacked as any)
   }
 }
 
@@ -73,7 +73,7 @@ export async function tryInstallFromLocal(id: string) {
     return false
 
   const data = result.data
-  Iconify.addCollection(data)
+  addCollection(data)
   installed.value.push(id)
 
   return true
@@ -89,7 +89,7 @@ export async function downloadAndInstall(id: string) {
 
   const data = Object.freeze(await fetch(`${staticPath}/collections/${id}-raw.json`).then(r => r.json()))
 
-  Iconify.addCollection(data)
+  addCollection(data)
   installed.value.push(id)
 
   if (!isLocalMode)

src/main.ts

@@ -1,15 +1,14 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import routes from 'virtual:generated-pages'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import './utils/electron'
 import './main.css'
 import 'uno.css'
+import 'iconify-icon'
 
-// import icons data genereted by PurgeIcons
-import '@purge-icons/generated'
 import { basePath } from './env'
+import routes from '~pages'
 
 const app = createApp(App)
 

src/utils/icons.ts

@@ -1,18 +1,27 @@
-import Iconify from '@purge-icons/generated'
+import { buildIcon, loadIcon } from 'iconify-icon'
 import { getTransformedId } from '../store'
 import Base64 from './base64'
 import { HtmlToJSX } from './htmlToJsx'
 
 const API_ENTRY = 'https://api.iconify.design'
 
+export async function getSvgLocal(icon: string, size = '1em', color = 'currentColor') {
+  const data = await loadIcon(icon)
+  if (!data)
+    return
+  const built = buildIcon(data, { height: size })
+  if (!built)
+    return
+  return `<svg ${Object.entries(built.attributes).map(([k, v]) => `${k}="${v}"`).join(' ')}>${built.body}</svg>`.replace('currentColor', color)
+}
+
 export async function getSvg(icon: string, size = '1em', color = 'currentColor') {
-  return Iconify.renderSVG(icon, { height: size })?.outerHTML?.replace('currentColor', color)
+  return await getSvgLocal(icon, size, color)
    || await fetch(`${API_ENTRY}/${icon}.svg?inline=false&height=${size}&color=${encodeURIComponent(color)}`).then(r => r.text()) || ''
 }
 
 export async function getSvgSymbol(icon: string, size = '1em', color = 'currentColor') {
-  const svgMarkup = Iconify.renderSVG(icon, { height: size })?.outerHTML?.replace('currentColor', color)
-  || await fetch(`${API_ENTRY}/${icon}.svg?inline=false&height=${size}&color=${encodeURIComponent(color)}`).then(r => r.text()) || ''
+  const svgMarkup = await getSvg(icon, size, color)
 
   const symbolElem = document.createElementNS('http://www.w3.org/2000/svg', 'symbol')
   const node = document.createElement('div') // Create any old element

vite.config.ts

@@ -1,7 +1,6 @@
-import { join } from 'path'
+import { join, resolve } from 'path'
 import { defineConfig } from 'vite'
 import Pages from 'vite-plugin-pages'
-import PurgeIcons from 'vite-plugin-purge-icons'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { VitePWA } from 'vite-plugin-pwa'
@@ -14,6 +13,9 @@ export default defineConfig({
   plugins: [
     Vue({
       reactivityTransform: true,
+      customElement: [
+        'iconify-icon',
+      ],
     }),
     Pages({
       importMode: 'sync',
@@ -30,7 +32,6 @@ export default defineConfig({
       ],
       dts: 'src/auto-imports.d.ts',
     }),
-    PurgeIcons(),
     VitePWA({
       manifest: {
         name: 'Icônes',
@@ -55,4 +56,9 @@ export default defineConfig({
   define: {
     __BUILD_TIME__: JSON.stringify(dayjs().format('YYYY/MM/DD HH:mm')),
   },
+  resolve: {
+    alias: {
+      'iconify-icon': resolve(__dirname, 'node_modules/iconify-icon/dist/iconify-icon.mjs'),
+    },
+  },
 })