feature: 图标支持自定义

examples/src/pages/UIView.vue

@@ -96,6 +96,7 @@
             </div>
           </NCard>
         </n-tab-pane>
+        <n-tab-pane name="icon" tab="内置图标" />
       </n-tabs>
     </n-layout>
   </n-layout>

packages/base/src/components/RenderSlot.ts

@@ -6,6 +6,6 @@ export default defineComponent({
   },
   // @ts-ignore
   setup(props) {
-    return () => [h('template', {}, props.slots)]
+    return () => [h('div', {}, props.slots)]
   }
 })

packages/designer/src/components/xicon/index.ts

@@ -1,5 +1,6 @@
 import type { App } from 'vue'
 
+import useIcon from './useIcon'
 import XIcon from './XIcon.vue'
 
 export { XIcon }
@@ -10,3 +11,5 @@ export default {
     app.component('XIcon', XIcon)
   }
 }
+
+export { useIcon }

packages/designer/src/components/xicon/useIcon.ts

@@ -0,0 +1,49 @@
+import { Icon } from '@vicons/utils'
+import type { Component, ComputedRef, PropType } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
+
+import stanadarIcon from './icon-map'
+
+export default function useIcon(icons?: Record<string, Component>) {
+  stanadarIcon as Record<string, Component>
+  const iconMap = { ...stanadarIcon, ...(icons || {}) }
+  return defineComponent({
+    props: {
+      name: {
+        type: String as PropType<string>,
+        default: 'help'
+      },
+      color: {
+        type: String as PropType<string>
+      },
+      size: {
+        type: Number as PropType<number>,
+        default: 25
+      }
+    },
+    setup(props, _context) {
+      const darkTheme = inject<ComputedRef<boolean>>(
+        'DarkTheme',
+        computed(() => true)
+      )
+      const getIconColor = () => {
+        return darkTheme.value ? '#eeee' : '#333'
+      }
+      const iconColor = computed<string>(() => (props.color ? props.color : getIconColor()))
+      return { iconColor }
+    },
+    render: ({ name, size, iconColor }: { name: string; size: number; iconColor: string }) => {
+      const obIcon = iconMap[name]
+      return h(
+        Icon,
+        {
+          class: 'h-full inline-flex justify-center items-center',
+          tag: 'span',
+          size: size,
+          color: iconColor
+        },
+        () => h(obIcon, {})
+      )
+    }
+  })
+}

packages/designer/src/loadPlugin.ts

@@ -1,14 +1,18 @@
-import type { App } from 'vue'
+import type { App, Component } from 'vue'
 import { defineAsyncComponent } from 'vue'
 
 import Group from './components/Group'
+import { useIcon } from './components/xicon'
 import useCanvasState from './state/canvas'
 
 const canvasState = useCanvasState()
-
-const useComponentPlugin = ({ codeEditorComponent }: { codeEditorComponent?: any }) => {
-  const OXIcon = defineAsyncComponent(() => import('./components/xicon/XIcon.vue'))
-
+const useComponentPlugin = ({
+  codeEditorComponent,
+  icons
+}: {
+  codeEditorComponent?: Component
+  icons?: Record<string, Component>
+}) => {
   const OCodeEditor = codeEditorComponent
     ? codeEditorComponent
     : defineAsyncComponent(() => import('./components/CodeEditor.vue'))
@@ -19,11 +23,13 @@ const useComponentPlugin = ({ codeEditorComponent }: { codeEditorComponent?: any
     timeout: 3000
   })
   canvasState.loadComponent(Group.componentName, Group.config)
+
+  const OIcon = useIcon(icons)
   return {
     install(app: App) {
       // 插入元素
       app.component('OCodeEditor', OCodeEditor)
-      app.component('XIcon', OXIcon)
+      app.component('XIcon', OIcon)
       app.component(Group.componentName, groupComp)
     }
   }