💄 style: Update Dify and ComfyUI new Brand Logo

.cursor/rules/lobe-icons-guide.mdc

@@ -0,0 +1,205 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Lobe Icons Repository Guide
+
+This guide provides comprehensive information about the lobe-icons repository structure and how to add new icons.
+
+## Project Overview
+
+The lobe-icons repository contains over 150 AI/ML brand icons organized in a consistent structure. Each icon brand has its own directory under `src/` with standardized components and exports.
+
+## Directory Structure
+
+### Root Structure
+- `src/` - Contains all icon brand directories
+- `packages/` - Static format packages (PNG, SVG, WebP)
+- `docs/` - Documentation and guides
+- `scripts/` - Build and automation scripts
+
+### Icon Brand Structure
+Each icon brand follows this pattern:
+```
+src/IconName/
+├── index.ts          # Main exports
+├── style.ts          # Brand constants and styling
+├── index.md          # Documentation
+└── components/
+    ├── Mono.tsx      # Monochrome icon
+    ├── Color.tsx     # Colored icon (if applicable)
+    ├── Text.tsx      # Text component
+    ├── Avatar.tsx    # Avatar component
+    └── Combine.tsx   # Combined icon+text
+```
+
+## Adding a New Icon
+
+### 1. Create Directory Structure
+Create a new directory under `src/` with your icon brand name:
+```
+src/YourIconName/
+```
+
+### 2. Essential Files to Create
+
+#### Style Configuration ([style.ts](mdc:src/AdobeFirefly/style.ts))
+```typescript
+export const TITLE = 'YourIconName';
+export const TEXT_MULTIPLE = 0.6;        // Used in Combine component
+export const SPACE_MULTIPLE = 0.1;       // Used in Combine component
+export const COLOR_PRIMARY = '#yourBrandColor'; // Used in Avatar
+
+// Avatar constants (recommended)
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;
+```
+
+#### Monochrome Icon ([Mono.tsx](mdc:src/AdobeFirefly/components/Mono.tsx))
+```typescript
+'use client';
+
+import { memo } from 'react';
+import type { IconType } from '@/types';
+import { TITLE } from '../style';
+
+const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="YOUR_SVG_PATH_DATA" />
+    </svg>
+  );
+});
+
+export default Icon;
+```
+
+#### Avatar Component ([Avatar.tsx](mdc:src/AdobeFirefly/components/Avatar.tsx))
+```typescript
+'use client';
+
+import { memo } from 'react';
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={background || AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;
+```
+
+#### Main Index File ([index.ts](mdc:src/AdobeFirefly/index.ts))
+```typescript
+import Avatar from './components/Avatar';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+import { COLOR_PRIMARY, TITLE } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  colorPrimary: string;
+  title: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+Icons.title = TITLE;
+
+export default Icons;
+```
+
+### 3. SVG Preparation Guidelines
+
+1. **Source**: Find the official SVG logo of the brand
+2. **Cleanup**: Remove unnecessary elements and attributes
+3. **Scale**: Ensure it fits within 24x24 viewBox
+4. **Extract**: Get the path data for the icon
+5. **Tool**: Use https://icons.lobehub.com/editor for formatted SVG output
+
+### 4. Icon Types
+
+#### Monochrome Icons
+- Use `currentColor` for fill
+- Inherit color from parent element
+- Best for UI elements that need theme consistency
+
+#### Colored Icons
+- Include brand-specific colors
+- Maintain colors regardless of parent styling
+- Best for brand representation
+- Create both `Mono.tsx` and `Color.tsx` components
+
+### 5. Documentation ([index.md](mdc:src/AdobeFirefly/index.md))
+Create documentation with examples for all component variants:
+- Basic icons (Mono/Color)
+- Text component
+- Combine component
+- Avatar component
+- Color preview
+
+### 6. Export Integration
+Update [src/icons.ts](mdc:src/icons.ts) to include your new icon:
+```typescript
+export { default as YourIconName, type CompoundedIcon as YourIconNameProps } from './YourIconName';
+```
+
+## Development Workflow
+
+### Build Commands
+```bash
+npm run build    # Build all icons
+npm run dev      # Start demo site
+```
+
+### Quality Checks
+1. Test icon in light and dark modes
+2. Verify appearance at different sizes
+3. Check all component variants work correctly
+4. Ensure SVG path is optimized
+
+## Important Notes
+
+- The [src/toc.ts](mdc:src/toc.ts) file is generated automatically
+- Static format images (PNG, SVG, WebP) are generated automatically
+- Group types: Model | Provider | Application
+- All icons should be 24x24 viewBox for consistency
+- Use the online editor at https://icons.lobehub.com/editor for best results
+
+## Best Practices
+
+1. **Consistency**: Follow existing patterns and naming conventions
+2. **Optimization**: Clean and optimize SVG paths
+3. **Documentation**: Provide clear examples for all variants
+4. **Testing**: Verify icons work across different contexts
+5. **Accessibility**: Include proper aria-labels and titles

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Install bun
         uses: oven-sh/setup-bun@v2
         with:
-            bun-version: 1.0.31
+          bun-version: 1.0.31
 
       - name: Install deps
         run: bun i

pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 packages:
-  - "*"
+  - '*'
   - 'packages/**'

scripts/svgWorkflow/index.ts

@@ -22,7 +22,7 @@ const themeColors = {
 };
 
 class SvgWorkflow {
-  ignoreList = ['cursor.svg', 'dify.svg', 'dify-color.svg'];
+  ignoreList = ['cursor.svg'];
 
   exportSvg(Component: ComponentType, outputFileName: string): void {
     const svgString = renderToStaticMarkup(createElement(Component));

src/Adobe/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Adobe/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Adobe/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Adobe';
-export const TEXT_MULTIPLE = 0.6;
+export const COMBINE_TEXT_MULTIPLE = 0.6;
-export const SPACE_MULTIPLE = 0.3;
+export const COMBINE_SPACE_MULTIPLE = 0.3;
 export const COLOR_PRIMARY = '#EB1000';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/AdobeFirefly/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
-      iconMultiple={0.6}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AdobeFirefly/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Avatar from './Avatar';
 import Text from './Text';
 
@@ -17,8 +17,8 @@ const Combine = memo<CombineProps>(({ iconProps, ...rest }) => {
       Text={Text as any}
       aria-label={TITLE}
       iconProps={{ shape: 'square', ...iconProps }}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AdobeFirefly/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AdobeFirefly';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.3;
+export const COMBINE_SPACE_MULTIPLE = 0.3;
 export const COLOR_PRIMARY = '#EB1000';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/Ai21/components/Avatar.tsx

@@ -4,19 +4,20 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_GRADIENT, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_GRADIENT}
+      background={AVATAR_BACKGROUND}
-      iconStyle={{ marginLeft: -size * 0.05 }}
+      color={AVATAR_COLOR}
-      size={size}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      iconStyle={{ marginLeft: -rest.size * 0.05 }}
       {...rest}
     />
   );

src/Ai21/components/Combine.tsx

@@ -1,32 +1,23 @@
 'use client';
 
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
-import Avatar from './Avatar';
+import Brand from './Brand';
-import Text from './Text';
+import BrandColor from './BrandColor';
 
 export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
   type: 'mono' | 'color';
 }
-const Combine = memo<CombineProps>(({ type = 'mono', iconProps, ...rest }) => {
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
-  const theme = useTheme();
   return (
     <IconCombine
-      Icon={Avatar}
+      Text={type === 'mono' ? Brand : BrandColor}
-      Text={Text}
       aria-label={TITLE}
-      iconProps={{
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-        background: type === 'mono' ? theme.colorText : undefined,
+      textMultiple={COMBINE_TEXT_MULTIPLE}
-        color: type === 'mono' ? theme.colorBgLayout : undefined,
-        shape: 'square',
-        ...iconProps,
-      }}
-      spaceMultiple={SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Ai21/index.md

@@ -63,7 +63,7 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox gap={16} horizontal>
-    <Ai21.Avatar size={64} background={Ai21.colorPrimary} />
+    <Ai21.Avatar size={64} background={Ai21.colorGradient} />
     <Ai21.Avatar size={64} />
     <Ai21.Avatar size={64} shape={'square'} />
   </Flexbox>

src/Ai21/style.ts

@@ -1,5 +1,10 @@
 export const TITLE = 'AI21';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#E91E63';
 export const COLOR_GRADIENT = 'linear-gradient(-45deg, #F68CB2,  #E91E63)';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.7;

src/Ai360/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_GRADIENT, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_GRADIENT}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Ai360/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Ai360/style.ts

@@ -1,5 +1,10 @@
 export const TITLE = 'AI360';
-export const TEXT_MULTIPLE = 0.7;
+export const COMBINE_TEXT_MULTIPLE = 0.7;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#006ffb';
 export const COLOR_GRADIENT = 'linear-gradient(to bottom, #12B7FA,  #006ffb)';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_GRADIENT;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/AiHubMix/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Inner from './Inner';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Inner}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
-      iconMultiple={0.7}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AiHubMix/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AiHubMix/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AiHubMix';
-export const TEXT_MULTIPLE = 0.7;
+export const COMBINE_TEXT_MULTIPLE = 0.7;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#006FFB';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/AiMass/components/Avatar.tsx

@@ -4,17 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Color}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AiMass/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AiMass/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AiMass';
-export const TEXT_MULTIPLE = 0.65;
+export const COMBINE_TEXT_MULTIPLE = 0.65;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#fff';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.8;

src/AiStudio/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
-      size={size}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AiStudio/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AiStudio/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Google AI Studio';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#0057CC';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/AionLabs/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || '#F9FBFC'}
+      background={AVATAR_BACKGROUND}
-      color={COLOR_PRIMARY}
+      color={AVATAR_COLOR}
-      size={size}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AionLabs/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AionLabs/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AionLabs';
-export const TEXT_MULTIPLE = 0.8;
+export const COMBINE_TEXT_MULTIPLE = 0.8;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#0f172a';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = '#fff';
+export const AVATAR_COLOR = COLOR_PRIMARY;
+export const AVATAR_ICON_MULTIPLE = 0.8;

src/AlephAlpha/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#000'}
+      color={AVATAR_COLOR}
-      iconMultiple={0.7}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AlephAlpha/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 import Text from './Text';
 
@@ -16,8 +16,8 @@ const Combine = memo<CombineProps>(({ ...rest }) => {
       Icon={Mono}
       Text={Text as any}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AlephAlpha/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AlephAlpha';
-export const TEXT_MULTIPLE = 0.8;
+export const COMBINE_TEXT_MULTIPLE = 0.8;
-export const SPACE_MULTIPLE = 0.3;
+export const COMBINE_SPACE_MULTIPLE = 0.3;
 export const COLOR_PRIMARY = '#fff';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#000';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Alibaba/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/Alibaba/style.ts

@@ -1,2 +1,7 @@
 export const TITLE = 'Alibaba';
 export const COLOR_PRIMARY = '#FF6003';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.8;

src/AlibabaCloud/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/AlibabaCloud/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import TextCn from './TextCn';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={TextCn}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AlibabaCloud/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AlibabaCloud';
-export const TEXT_MULTIPLE = 0.65;
+export const COMBINE_TEXT_MULTIPLE = 0.65;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#FF6A00';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.7;

src/AntGroup/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/AntGroup/style.ts

@@ -1,2 +1,7 @@
 export const TITLE = 'AntGroup';
 export const COLOR_PRIMARY = '#1677ff';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.8;

src/Anthropic/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#191918'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Anthropic/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Anthropic';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.1;
+export const COMBINE_SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#F1F0E8';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#141413';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Anyscale/components/Avatar.tsx

@@ -4,20 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
-      iconMultiple={0.7}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
-      size={size}
       {...rest}
     />
   );

src/Anyscale/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Anyscale/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Anyscale';
-export const TEXT_MULTIPLE = 0.85;
+export const COMBINE_TEXT_MULTIPLE = 0.85;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#0163FB';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/AssemblyAI/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      iconMultiple={0.65}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AssemblyAI/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AssemblyAI/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AssemblyAI';
-export const TEXT_MULTIPLE = 1;
+export const COMBINE_TEXT_MULTIPLE = 1;
-export const SPACE_MULTIPLE = 0.3;
+export const COMBINE_SPACE_MULTIPLE = 0.3;
 export const COLOR_PRIMARY = '#2545D3';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/Automatic/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/Automatic/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Automatic/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Automatic';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#E00054';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Aws/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Color}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Aws/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Aws/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AWS';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#222F3E';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Aya/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/Aya/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Aya/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Aya';
-export const TEXT_MULTIPLE = 1;
+export const COMBINE_TEXT_MULTIPLE = 1;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#416FDC';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/Azure/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Color}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      iconMultiple={0.7}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Azure/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Azure/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Azure';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.25;
+export const COMBINE_SPACE_MULTIPLE = 0.25;
 export const COLOR_PRIMARY = '#fff';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.7;

src/AzureAI/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Color}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      iconMultiple={0.65}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/AzureAI/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/AzureAI/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'AzureAI';
-export const TEXT_MULTIPLE = 0.7;
+export const COMBINE_TEXT_MULTIPLE = 0.7;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#000';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/BAAI/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
-      iconMultiple={0.6}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/BAAI/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 import Text from './Text';
 
@@ -17,8 +17,8 @@ const Combine = memo<CombineProps>(({ ...rest }) => {
       Text={Text}
       aria-label={TITLE}
       iconProps={{ shape: 'square' }}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/BAAI/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'BAAI';
-export const TEXT_MULTIPLE = 0.7;
+export const COMBINE_TEXT_MULTIPLE = 0.7;
-export const SPACE_MULTIPLE = 0.3;
+export const COMBINE_SPACE_MULTIPLE = 0.3;
 export const COLOR_PRIMARY = '#000';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/Baichuan/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/Baichuan/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -21,8 +21,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', extraStyle, ...rest }) => {
       Text={Text}
       aria-label={TITLE}
       extraStyle={{ fontWeight: 500, ...extraStyle }}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Baichuan/style.ts

@@ -1,5 +1,10 @@
 export const TITLE = 'Baichuan';
-export const TEXT_MULTIPLE = 1;
+export const COMBINE_TEXT_MULTIPLE = 1;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#FF6933';
 export const COLOR_GRADIENT = 'linear-gradient(-45deg, #FF6933, #FEC13E)';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/Baidu/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/Baidu/style.ts

@@ -1,2 +1,7 @@
 export const TITLE = 'Baidu';
 export const COLOR_PRIMARY = '#2932E1';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/BaiduCloud/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/BaiduCloud/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/BaiduCloud/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'BaiduCloud';
-export const TEXT_MULTIPLE = 0.8;
+export const COMBINE_TEXT_MULTIPLE = 0.8;
-export const SPACE_MULTIPLE = 0.15;
+export const COMBINE_SPACE_MULTIPLE = 0.15;
 export const COLOR_PRIMARY = '#2468f2';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Baseten/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#000'}
+      color={AVATAR_COLOR}
-      iconMultiple={0.7}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Baseten/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 import Text from './Text';
 
@@ -16,8 +16,8 @@ const Combine = memo<CombineProps>(({ ...rest }) => {
       Icon={Mono}
       Text={Text as any}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Baseten/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Baseten';
-export const TEXT_MULTIPLE = 0.8;
+export const COMBINE_TEXT_MULTIPLE = 0.8;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#19E76E';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#000';
+export const AVATAR_ICON_MULTIPLE = 0.65;

src/Bedrock/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_GRADIENT, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_GRADIENT}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Bedrock/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Bedrock/style.ts

@@ -1,5 +1,10 @@
 export const TITLE = 'Bedrock';
-export const TEXT_MULTIPLE = 0.6;
+export const COMBINE_TEXT_MULTIPLE = 0.6;
-export const SPACE_MULTIPLE = 0.1;
+export const COMBINE_SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#222F3E';
 export const COLOR_GRADIENT = 'linear-gradient(45deg, #9AD8F8, #3D8FFF, #6350FB)';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_GRADIENT;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Bing/components/Avatar.tsx

@@ -4,19 +4,20 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_GRADIENT, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, iconStyle, size, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_GRADIENT}
+      background={AVATAR_BACKGROUND}
-      iconStyle={{ marginLeft: size * 0.08, ...iconStyle }}
+      color={AVATAR_COLOR}
-      size={size}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      iconStyle={{ marginLeft: rest.size * 0.08 }}
       {...rest}
     />
   );

src/Bing/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Bing/style.ts

@@ -1,5 +1,10 @@
 export const TITLE = 'Bing';
-export const TEXT_MULTIPLE = 0.8;
+export const COMBINE_TEXT_MULTIPLE = 0.8;
-export const SPACE_MULTIPLE = 0.1;
+export const COMBINE_SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#174ae4';
 export const COLOR_GRADIENT = 'linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_GRADIENT;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.7;

src/BurnCloud/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/BurnCloud/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/BurnCloud/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'BurnCloud';
-export const TEXT_MULTIPLE = 0.5;
+export const COMBINE_TEXT_MULTIPLE = 0.5;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#E95513';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/ByteDance/components/Avatar.tsx

@@ -4,14 +4,21 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
-    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={AVATAR_BACKGROUND}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

src/ByteDance/style.ts

@@ -1,2 +1,7 @@
 export const TITLE = 'ByteDance';
 export const COLOR_PRIMARY = '#325AB4';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.6;

src/CentML/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Color}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/CentML/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './BrandColor';
 import Mono from './BrandMono';
 
@@ -18,8 +18,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
     <IconCombine
       Icon={Icon}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/CentML/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'CentML';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.1;
+export const COMBINE_SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#004331';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Cerebras/components/Avatar.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Cerebras/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './BrandColor';
 import Mono from './BrandMono';
 
@@ -18,8 +18,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
     <IconCombine
       Icon={Icon}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Cerebras/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Cerebras';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.1;
+export const COMBINE_SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#F15A29';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.8;

src/ChatGLM/components/Avatar.tsx

@@ -4,19 +4,20 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_GRADIENT, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ size = 24, background, iconStyle, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Mono}
       aria-label={TITLE}
-      background={background || COLOR_GRADIENT}
+      background={AVATAR_BACKGROUND}
-      iconStyle={{ marginLeft: size * 0.1, ...iconStyle }}
+      color={AVATAR_COLOR}
-      size={size}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
+      iconStyle={{ marginLeft: rest.size * 0.1 }}
       {...rest}
     />
   );

src/ChatGLM/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -20,8 +20,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/ChatGLM/index.md

@@ -50,7 +50,7 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox gap={16} horizontal>
-    <ChatGLM.Avatar size={64} background={ChatGLM.colorPrimary} />
+    <ChatGLM.Avatar size={64} background={ChatGLM.colorGradient} />
     <ChatGLM.Avatar size={64} />
     <ChatGLM.Avatar size={64} shape={'square'} />
   </Flexbox>

src/ChatGLM/style.ts

@@ -1,5 +1,10 @@
 export const TITLE = 'ChatGLM';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.1;
+export const COMBINE_SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#4268FA';
 export const COLOR_GRADIENT = 'linear-gradient(-45deg, #3485FF,  #504AF4)';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.75;

src/Civitai/components/Avatar.tsx

@@ -4,19 +4,19 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
 
-import { COLOR_PRIMARY, TITLE } from '../style';
+import { AVATAR_BACKGROUND, AVATAR_COLOR, AVATAR_ICON_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
-const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+const Avatar = memo<AvatarProps>(({ ...rest }) => {
   return (
     <IconAvatar
       Icon={Color}
       aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
+      background={AVATAR_BACKGROUND}
-      color={'#fff'}
+      color={AVATAR_COLOR}
-      size={size}
+      iconMultiple={AVATAR_ICON_MULTIPLE}
       {...rest}
     />
   );

src/Civitai/components/Combine.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
 
-import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
@@ -21,8 +21,8 @@ const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
       Icon={Icon}
       Text={type === 'color' ? TextColor : Text}
       aria-label={TITLE}
-      spaceMultiple={SPACE_MULTIPLE}
+      spaceMultiple={COMBINE_SPACE_MULTIPLE}
-      textMultiple={TEXT_MULTIPLE}
+      textMultiple={COMBINE_TEXT_MULTIPLE}
       {...rest}
     />
   );

src/Civitai/style.ts

@@ -1,4 +1,9 @@
 export const TITLE = 'Civitai';
-export const TEXT_MULTIPLE = 0.75;
+export const COMBINE_TEXT_MULTIPLE = 0.75;
-export const SPACE_MULTIPLE = 0.2;
+export const COMBINE_SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#fff';
+
+// Avatar constants
+export const AVATAR_BACKGROUND = COLOR_PRIMARY;
+export const AVATAR_COLOR = '#fff';
+export const AVATAR_ICON_MULTIPLE = 0.8;