feat: implement SVG minification and optimize SVG loading

Author: lisonge

package.json

@@ -64,6 +64,7 @@
     "sass": "1.97.2",
     "simple-git": "3.30.0",
     "simple-git-hooks": "2.13.1",
+    "svgo": "4.0.0",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "typescript-eslint": "8.53.1",

plugins/index.ts

@@ -1,3 +1,4 @@
 export * from './mirror';
 export * from './unAutoImport';
 export * from './_404Page';
+export * from './miniSvg';

plugins/miniSvg.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite';
+
+export function svgMinify(): Plugin {
+  return {
+    name: 'vite-svg-minify',
+    apply: 'build',
+    enforce: 'pre',
+    async load(id) {
+      if (!id.endsWith('.svg?raw')) return;
+      const [fp] = id.split('?');
+      const text = await this.fs.readFile(fp, { encoding: 'utf8' });
+      const { optimize } = await import('svgo');
+      const result = optimize(text);
+      return `export default ${JSON.stringify(result.data)};`;
+    },
+  };
+}

pnpm-lock.yaml

@@ -1,22 +1,8 @@
 <script lang="ts">
-const modules: Record<string, { default: string }> = import.meta.glob(
-  '@/assets/svg/*.svg',
-  {
-    eager: true,
-    query: 'raw',
-  },
+const svgElMap = computedAsync(
+  async () => (await import('@/utils/svg')).default,
+  {},
 );
-
-const svgElMap = (() => {
-  return Object.fromEntries(
-    Object.entries(modules).map(([k, v]) => {
-      const svgName = k.split('/').at(-1)!.split('.')[0];
-      const t = document.createElement('template');
-      t.innerHTML = v.default;
-      return [svgName, t.content.firstChild as SVGSymbolElement | null];
-    }),
-  );
-})();
 </script>
 <script setup lang="ts">
 const props = withDefaults(
@@ -26,7 +12,7 @@ const props = withDefaults(
   {},
 );
 
-const svgEl = computed(() => svgElMap[props.name]);
+const svgEl = computed(() => svgElMap.value[props.name]);
 const actualEl = shallowRef<SVGSVGElement>();
 watchEffect(() => {
   const s = svgEl.value;

src/components/SvgIcon.vue

@@ -0,0 +1,14 @@
+const modules = import.meta.glob<string>('@/assets/svg/*.svg', {
+  eager: true,
+  query: 'raw',
+  import: 'default',
+});
+
+export default Object.fromEntries(
+  Object.entries(modules).map(([k, v]) => {
+    const name = k.split('/').at(-1)!.split('.')[0];
+    const t = document.createElement('template');
+    t.innerHTML = v;
+    return [name, t.content.firstChild as SVGSymbolElement];
+  }),
+);

src/utils/svg.ts

@@ -1,28 +1,11 @@
 <script setup lang="ts">
 import { message } from '@/utils/discrete';
 
-const getIds = () => {
-  return Array.from(
-    document.querySelectorAll('#__svg_icon_container__ > *'),
-  ).map((v) => v.getAttribute('id')!.substring('svg-icon-'.length));
-};
-
-const svgIds = ref(getIds());
-
-const observer = new MutationObserver(() => {
-  svgIds.value = getIds();
-});
-onMounted(() => {
-  observer.observe(
-    document.querySelector('#__svg_icon_container__') as HTMLElement,
-    {
-      attributes: true,
-    },
-  );
-});
-onUnmounted(() => {
-  observer.disconnect();
-});
+const svgElMap = computedAsync(
+  async () => (await import('@/utils/svg')).default,
+  {},
+);
+const svgIds = computed(() => Object.keys(svgElMap.value));
 
 const search = ref('');
 const filterSvgIds = computed(() => {

src/views/SvgPage.vue

@@ -6,7 +6,7 @@ import unocss from 'unocss/vite';
 import data from 'unplugin-data/vite';
 import { defineConfig } from 'vite';
 import type { ESBuildOptions } from 'vite';
-import { mirror, unAutoImport, _404Page } from './plugins';
+import { mirror, unAutoImport, _404Page, svgMinify } from './plugins';
 
 // support top-level-await
 const chromeVersion = 89;
@@ -16,6 +16,7 @@ const port = 8444;
 export default defineConfig(() => {
   return {
     plugins: [
+      svgMinify(),
       vue(),
       vueJsx(),
       unocss({ inspector: false }),