fix: iconfont provider & add support for custom user icons (#79)

Author: Col0ring

.changeset/little-ideas-greet.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/antd': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: iconfont provider not displaying after build

.changeset/purple-melons-dance.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/antd': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+feat: add support for custom user icons

backend/modelscope_studio/components/antd/icon/__init__.py

@@ -2,11 +2,11 @@
 
 from gradio.events import EventListener
 
-from ....utils.dev import ModelScopeComponent, resolve_frontend_dir
+from ....utils.dev import ModelScopeDataLayoutComponent, resolve_frontend_dir
 from .iconfont_provider import AntdIconIconfontProvider
 
 
-class AntdIcon(ModelScopeComponent):
+class AntdIcon(ModelScopeDataLayoutComponent):
     """
     Ant Design: https://ant.design/components/icon
 
@@ -22,7 +22,7 @@ class AntdIcon(ModelScopeComponent):
     ]
 
     # supported slots
-    SLOTS = []
+    SLOTS = ["component"]
 
     def __init__(
             self,

docs/components/antd/icon/demos/basic.py

@@ -15,5 +15,9 @@
                 antd.Icon("SmileTwoTone")
                 icon = antd.Icon("HeartTwoTone", two_tone_color="#eb2f96")
                 icon.click(lambda: print("clicked"))
+            antd.Divider("Custom Icon")
+            with antd.Icon():
+                with ms.Slot("component"):
+                    ms.Text("🔥")
 if __name__ == "__main__":
     demo.queue().launch()

frontend/antd/icon/Index.svelte

@@ -68,6 +68,8 @@
       {...bindEvents($mergedProps)}
       slots={$slots}
       value={$mergedProps.value}
-    />
+    >
+      <slot />
+    </Icon>
   {/await}
 {/if}

frontend/antd/icon/icon.tsx

@@ -1,19 +1,45 @@
 import { sveltify } from '@svelte-preprocess-react';
-import React from 'react';
+import { useIconFontContext } from '@svelte-preprocess-react/context';
+import { ReactSlot } from '@svelte-preprocess-react/react-slot';
+import React, { useMemo } from 'react';
 import * as icons from '@ant-design/icons';
 import type { GetProps } from 'antd';
 
-import { useIconFontContext } from './iconfont-provider/context';
+() => {
+  return;
+};
 
 export const Icon = sveltify<
   GetProps<typeof icons.default> & {
     value: string;
-  }
->(({ value, ...props }) => {
+  },
+  ['component']
+>(({ value, slots, children, ...props }) => {
   const IconFont = useIconFontContext();
   const icon = icons[value as keyof typeof icons] as React.ComponentType<
     GetProps<typeof icons.default>
   >;
+
+  const CustomComponentIcon = useMemo(() => {
+    return (() =>
+      slots.component ? (
+        <ReactSlot slot={slots.component} />
+      ) : null) as unknown as React.ComponentType<
+      React.SVGProps<SVGSVGElement>
+    >;
+  }, [slots.component]);
+
+  if (slots.component) {
+    return (
+      <>
+        <div style={{ display: 'none' }}>{children}</div>
+        {React.createElement(icons.default, {
+          ...props,
+          component: CustomComponentIcon,
+        })}
+      </>
+    );
+  }
   return (
     <>
       {icon ? (

frontend/antd/icon/iconfont-provider/context.ts

@@ -1,11 +1,10 @@
 import { sveltify } from '@svelte-preprocess-react';
+import { IconFontContext } from '@svelte-preprocess-react/context';
 import React, { useMemo, useRef } from 'react';
 import { createFromIconfontCN } from '@ant-design/icons';
 import type { CustomIconOptions } from '@ant-design/icons/es/components/IconFont';
 import { isEqual } from 'lodash-es';
 
-import { IconFontContext } from './context';
-
 export const Icon = sveltify<
   CustomIconOptions & {
     children?: React.ReactNode;

frontend/antd/icon/iconfont-provider/iconfont-provider.tsx

@@ -1,6 +1,15 @@
 import React, { createContext, useContext, useMemo, useRef } from 'react';
+import type { createFromIconfontCN } from '@ant-design/icons';
 import { isEqual } from 'lodash-es';
 
+export const IconFontContext = createContext<ReturnType<
+  typeof createFromIconfontCN
+> | null>(null);
+
+export const useIconFontContext = () => {
+  return useContext(IconFontContext);
+};
+
 export const FormItemContext = createContext<{
   value?: any;
   onChange?: (...args: any[]) => void;