feat: symbolId

d2-admin/components/d2/svg/index.jsx

@@ -11,19 +11,25 @@ const classname = makeComponentClassName(name)
 export default defineComponent({
   name: componentName,
   props: {
+    symbolId: { type: String, default: '' },
     dir: { type: String, default: '' },
     name: { type: String, default: '' }
   },
   setup (props) {
     const { svgSymbolId, svgDir } = useConfig()
-    
+
+    const symbolId = computed(() => props.symbolId || svgSymbolId)
+
     const dir = computed(() => props.dir || svgDir)
 
     const href = computed(() => {
-      const result = svgSymbolId
-      return '#' + result
+      let result = unref(symbolId)
         .replace(/\[dir\]/g, unref(dir))
         .replace(/\[name\]/g, props.name)
+      if (!unref(dir)) {
+        result = result.replace('--', '-')
+      }
+      return '#' + result
     })
 
     const classnames = computed(() => makeClassnames(classname, {}))

d2-admin/index.js

@@ -1,10 +1,8 @@
-import router from '@/router/index.js'
-
 import 'virtual:svg-icons-register'
+import svgIcons from 'virtual:svg-icons-names'
+
 import '@purge-icons/generated'
 
 import 'd2-admin/assets/style/index.scss'
 
-export default function (app) {
-  app.use(router)
-}
+console.log('svgIcons', svgIcons)

src/main.js

@@ -1,13 +1,14 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import router from '@/router/index.js'
 
 import App from './App.vue'
 
-import d2Admin from './plugins/d2-admin.js'
+import 'd2-admin/index.js'
 import d2Projects from './plugins/d2-projects.js'
 
 createApp(App)
   .use(createPinia())
-  .use(d2Admin)
   .use(d2Projects)
+  .use(router)
   .mount('#app')

vite.config.js

@@ -85,7 +85,8 @@ export default defineConfig({
     SvgIcons({
       iconDirs: [
         resolve('d2-admin/assets/svg/icon')
-      ]
+      ],
+      symbolId: 'icon-[dir]-[name]'
     }),
     Icons({
       scale: 1,