💄 style: Add shape to ModelIcon and ProviderIcon

lobehub · Dec 24, 2024 · 25417aa · 25417aa
1 parent 328e85b
commit 25417aa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/features/ModelIcon/index.tsx b/src/features/ModelIcon/index.tsx
@@ -9,13 +9,14 @@ import DefaultIcon from './DefaultIcon';
 export interface ModelIconProps {
   className?: string;
   model?: string;
+  shape?: 'circle' | 'square';
   size?: number;
   style?: CSSProperties;
   type?: 'avatar' | 'mono' | 'color' | 'combine' | 'combine-color';
 }
 
 const ModelIcon = forwardRef<any, ModelIconProps>(
-  ({ model: originModel, size = 12, type = 'avatar', ...rest }, ref) => {
+  ({ model: originModel, size = 12, type = 'avatar', shape, ...rest }, ref) => {
     const Render = useMemo(() => {
       if (!originModel) return;
       const model = originModel.toLowerCase();
@@ -35,8 +36,8 @@ const ModelIcon = forwardRef<any, ModelIconProps>(
 
     switch (type) {
       case 'avatar': {
-        if (!Render?.Icon) return <DefaultAvatar {...props} />;
-        return <Render.Icon.Avatar {...props} />;
+        if (!Render?.Icon) return <DefaultAvatar shape={shape} {...props} />;
+        return <Render.Icon.Avatar shape={shape} {...props} />;
       }
       case 'mono': {
         if (!Render?.Icon) return <DefaultIcon {...props} />;

diff --git a/src/features/ProviderIcon/index.tsx b/src/features/ProviderIcon/index.tsx
@@ -11,13 +11,14 @@ export interface ProviderIconProps {
   className?: string;
   forceMono?: boolean;
   provider?: ModelProviderKey | string;
+  shape?: 'circle' | 'square';
   size?: number;
   style?: CSSProperties;
   type?: 'avatar' | 'mono' | 'color' | 'combine' | 'combine-color';
 }
 
 const ProviderIcon = forwardRef<any, ProviderIconProps>(
-  ({ provider: originProvider, size = 12, type = 'avatar', forceMono, ...rest }, ref) => {
+  ({ provider: originProvider, size = 12, type = 'avatar', forceMono, shape, ...rest }, ref) => {
     const Render = useMemo(() => {
       if (!originProvider) return;
       const provider = originProvider.toLowerCase();
@@ -38,8 +39,8 @@ const ProviderIcon = forwardRef<any, ProviderIconProps>(
 
     switch (type) {
       case 'avatar': {
-        if (!Render?.Icon) return <DefaultAvatar {...props} />;
-        return <Render.Icon.Avatar {...props} />;
+        if (!Render?.Icon) return <DefaultAvatar shape={shape} {...props} />;
+        return <Render.Icon.Avatar shape={shape} {...props} />;
       }
       case 'mono': {
         if (!Render?.Icon) return <DefaultIcon {...props} />;