Integrate Lobe Hub Icons with theme-adaptive monochrome option #3514

New Issue

2025-11-11T15:33:08-06:00

GiteaMirror commented

2025-11-11 15:33:08 -06:00

Originally created by @bannert1337 on GitHub (Jan 31, 2025).

Feature Request

Problem

Currently, the UI lacks visually consistent and theme-adaptive model icons. Integrating Lobe Hub Icons would provide a professional and cohesive visual experience.

Proposed Solution

Integrate Lobe Hub Icons for model icons
Add option to select between chromatic or monochrome variants
Make monochrome icons adapt to active theme:
- Dark theme: White color
- Light theme: Black color

Implementation Details

The integration can be done using Typescript as shown:

import { DeepSeek } from '@lobehub/icons';
import { Flexbox } from 'react-layout-kit';

export default () => (
  <Flexbox gap={16} horizontal>
    <DeepSeek size={64} />
    <DeepSeek.Color size={64} />
  </Flexbox>
);

Additional customization options like avatar implementation:

import { DeepSeek } from '@lobehub/icons';
import { Flexbox } from 'react-layout-kit';

export default () => (
  <Flexbox gap={16} horizontal>
    <DeepSeek.Avatar size={64} />
    <DeepSeek.Avatar size={64} shape={'square'} />
  </Flexbox>
);

Resources

Lobe Hub Icons documentation: https://icons.lobehub.com/components/deep-seek

This implementation would enhance the visual consistency and customization options for model icons while maintaining theme adaptability.

Originally created by @bannert1337 on GitHub (Jan 31, 2025). # Feature Request ### Problem Currently, the UI lacks visually consistent and theme-adaptive model icons. Integrating Lobe Hub Icons would provide a professional and cohesive visual experience. ### Proposed Solution 1. Integrate Lobe Hub Icons for model icons 2. Add option to select between chromatic or monochrome variants 3. Make monochrome icons adapt to active theme: - Dark theme: White color - Light theme: Black color ### Implementation Details The integration can be done using Typescript as shown: ```js import { DeepSeek } from '@lobehub/icons'; import { Flexbox } from 'react-layout-kit'; export default () => ( <Flexbox gap={16} horizontal> <DeepSeek size={64} /> <DeepSeek.Color size={64} /> </Flexbox> ); ``` Additional customization options like avatar implementation: ```js import { DeepSeek } from '@lobehub/icons'; import { Flexbox } from 'react-layout-kit'; export default () => ( <Flexbox gap={16} horizontal> <DeepSeek.Avatar size={64} /> <DeepSeek.Avatar size={64} shape={'square'} /> </Flexbox> ); ``` ### Resources - Lobe Hub Icons documentation: https://icons.lobehub.com/components/deep-seek This implementation would enhance the visual consistency and customization options for model icons while maintaining theme adaptability.

GiteaMirror closed this issue

2025-11-11 15:33:08 -06:00

GiteaMirror referenced this issue

2025-11-11 17:43:55 -06:00

[PR #3514] [MERGED] i18n: Update Chinese translation #8058

GiteaMirror referenced this issue

2026-04-20 03:25:25 -05:00

[PR #3514] [MERGED] i18n: Update Chinese translation #21262

GiteaMirror referenced this issue

2026-04-25 10:36:24 -05:00

[PR #3514] [MERGED] i18n: Update Chinese translation #36892

GiteaMirror referenced this issue