From f4a71e001bc6976cb75f0061babca0fd5e7d87c2 Mon Sep 17 00:00:00 2001 From: CanisMinor Date: Wed, 31 Jan 2024 10:58:27 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20Google=20Gemini?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Anthropic/components/Avatar.tsx | 16 +++++ src/Anthropic/components/Mono.tsx | 23 +++++++ src/Anthropic/components/Text.tsx | 22 +++++++ src/Anthropic/index.md | 57 +++++++++++++++++ src/Anthropic/index.ts | 19 ++++++ src/Anthropic/style.ts | 3 + src/ChatGLM/components/Avatar.tsx | 17 +++-- src/ChatGLM/components/Color.tsx | 6 +- src/ChatGLM/components/Combine.tsx | 19 +++--- src/ChatGLM/index.md | 19 ++++-- src/ChatGLM/index.ts | 8 ++- src/ChatGLM/style.ts | 1 + src/Dalle/components/Combine.tsx | 25 ++++++++ src/Dalle/components/Mono.tsx | 23 +++++++ src/Dalle/components/Text.tsx | 22 +++++++ src/Dalle/index.md | 48 ++++++++++++++ src/Dalle/index.ts | 19 ++++++ src/Dalle/style.ts | 3 + src/Editor/index.md | 2 +- src/Gemini/components/Avatar.tsx | 21 +++++++ src/Gemini/components/BrandColor.tsx | 40 ++++++++++++ src/Gemini/components/BrandMono.tsx | 22 +++++++ src/Gemini/components/Color.tsx | 34 ++++++++++ src/Gemini/components/Combine.tsx | 27 ++++++++ src/Gemini/components/Mono.tsx | 23 +++++++ src/Gemini/components/Text.tsx | 22 +++++++ src/Gemini/index.md | 91 +++++++++++++++++++++++++++ src/Gemini/index.ts | 32 ++++++++++ src/Gemini/style.ts | 5 ++ src/IconAvatar/demos/index.tsx | 5 ++ src/IconAvatar/index.md | 14 +++++ src/IconAvatar/index.tsx | 26 ++++++-- src/IconCombine/demos/index.tsx | 15 +++++ src/IconCombine/index.md | 14 +++++ src/IconCombine/index.tsx | 49 +++++++++++++++ src/OpenAI/components/Avatar.tsx | 32 ++++++++++ src/OpenAI/components/Combine.tsx | 24 +++++++ src/OpenAI/components/Mono.tsx | 23 +++++++ src/OpenAI/components/Text.tsx | 22 +++++++ src/OpenAI/index.md | 78 +++++++++++++++++++++++ src/OpenAI/index.ts | 24 +++++++ src/OpenAI/style.ts | 6 ++ src/Tongyi/components/Avatar.tsx | 13 ++-- src/Tongyi/components/Color.tsx | 6 +- src/Tongyi/components/Combine.tsx | 20 +++--- src/Tongyi/components/Text.tsx | 2 +- src/Tongyi/index.md | 20 ++++-- src/Tongyi/index.ts | 9 +-- src/Tongyi/style.ts | 1 + src/Wenxin/components/Avatar.tsx | 13 ++-- src/Wenxin/components/Color.tsx | 7 ++- src/Wenxin/components/Combine.tsx | 19 +++--- src/Wenxin/components/Mono.tsx | 6 -- src/Wenxin/index.md | 20 ++++-- src/Wenxin/index.ts | 8 ++- src/Wenxin/style.ts | 1 + src/Zhipu/components/Avatar.tsx | 11 ++-- src/Zhipu/components/Combine.tsx | 19 +++--- src/Zhipu/index.md | 17 +++-- src/Zhipu/index.ts | 4 +- src/components/ColorPreview/index.tsx | 3 +- src/hooks/useFillId.ts | 7 +++ src/index.ts | 14 +++-- 63 files changed, 1105 insertions(+), 116 deletions(-) create mode 100644 src/Anthropic/components/Avatar.tsx create mode 100644 src/Anthropic/components/Mono.tsx create mode 100644 src/Anthropic/components/Text.tsx create mode 100644 src/Anthropic/index.md create mode 100644 src/Anthropic/index.ts create mode 100644 src/Anthropic/style.ts create mode 100644 src/Dalle/components/Combine.tsx create mode 100644 src/Dalle/components/Mono.tsx create mode 100644 src/Dalle/components/Text.tsx create mode 100644 src/Dalle/index.md create mode 100644 src/Dalle/index.ts create mode 100644 src/Dalle/style.ts create mode 100644 src/Gemini/components/Avatar.tsx create mode 100644 src/Gemini/components/BrandColor.tsx create mode 100644 src/Gemini/components/BrandMono.tsx create mode 100644 src/Gemini/components/Color.tsx create mode 100644 src/Gemini/components/Combine.tsx create mode 100644 src/Gemini/components/Mono.tsx create mode 100644 src/Gemini/components/Text.tsx create mode 100644 src/Gemini/index.md create mode 100644 src/Gemini/index.ts create mode 100644 src/Gemini/style.ts create mode 100644 src/IconAvatar/demos/index.tsx create mode 100644 src/IconAvatar/index.md create mode 100644 src/IconCombine/demos/index.tsx create mode 100644 src/IconCombine/index.md create mode 100644 src/IconCombine/index.tsx create mode 100644 src/OpenAI/components/Avatar.tsx create mode 100644 src/OpenAI/components/Combine.tsx create mode 100644 src/OpenAI/components/Mono.tsx create mode 100644 src/OpenAI/components/Text.tsx create mode 100644 src/OpenAI/index.md create mode 100644 src/OpenAI/index.ts create mode 100644 src/OpenAI/style.ts create mode 100644 src/hooks/useFillId.ts diff --git a/src/Anthropic/components/Avatar.tsx b/src/Anthropic/components/Avatar.tsx new file mode 100644 index 00000000..9e8184dd --- /dev/null +++ b/src/Anthropic/components/Avatar.tsx @@ -0,0 +1,16 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Mono from './Mono'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Anthropic/components/Mono.tsx b/src/Anthropic/components/Mono.tsx new file mode 100644 index 00000000..9d048b53 --- /dev/null +++ b/src/Anthropic/components/Mono.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Anthropic/components/Text.tsx b/src/Anthropic/components/Text.tsx new file mode 100644 index 00000000..6f8be92e --- /dev/null +++ b/src/Anthropic/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Anthropic/index.md b/src/Anthropic/index.md new file mode 100644 index 00000000..d63d11e6 --- /dev/null +++ b/src/Anthropic/index.md @@ -0,0 +1,57 @@ +--- +nav: Components +group: Icons +title: Anthropic (Claude) +atomId: Anthropic +description: https://anthropic.com +--- + +## Icons + +```tsx +import { Anthropic } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ; +``` + +## Text + +```tsx +import { Anthropic } from '@lobehub/icons'; + +export default () => ; +``` + +## Avatars + +```tsx +import { Anthropic } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Anthropic } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` + +## APIs + + diff --git a/src/Anthropic/index.ts b/src/Anthropic/index.ts new file mode 100644 index 00000000..f1541ba3 --- /dev/null +++ b/src/Anthropic/index.ts @@ -0,0 +1,19 @@ +import Avatar from './components/Avatar'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Mono: typeof Mono; + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; + +Icons.Text = Text; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/Anthropic/style.ts b/src/Anthropic/style.ts new file mode 100644 index 00000000..061e4186 --- /dev/null +++ b/src/Anthropic/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.1; +export const COLOR_PRIMARY = '#D29D75'; diff --git a/src/ChatGLM/components/Avatar.tsx b/src/ChatGLM/components/Avatar.tsx index e3f3b1ef..ce0296ac 100644 --- a/src/ChatGLM/components/Avatar.tsx +++ b/src/ChatGLM/components/Avatar.tsx @@ -2,15 +2,20 @@ import { memo } from 'react'; import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; -import { COLOR_PRIMARY } from '../style'; +import { COLOR_GRADIENT } from '../style'; import Mono from './Mono'; -const Avatar = memo(({ size = 24, style, background, ...rest }) => { - const bg = background || COLOR_PRIMARY; +export type AvatarProps = Omit; + +const Avatar = memo(({ size = 24, background, iconStyle, ...rest }) => { return ( - - - + ); }); diff --git a/src/ChatGLM/components/Color.tsx b/src/ChatGLM/components/Color.tsx index 575707cf..875fd3f1 100644 --- a/src/ChatGLM/components/Color.tsx +++ b/src/ChatGLM/components/Color.tsx @@ -1,8 +1,10 @@ import { forwardRef } from 'react'; +import { useFillId } from '@/hooks/useFillId'; import type { IconType } from '@/types'; const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + const { id, fill } = useFillId('chatglm'); return ( { {...rest} > - + diff --git a/src/ChatGLM/components/Combine.tsx b/src/ChatGLM/components/Combine.tsx index 00b44972..176cdc8d 100644 --- a/src/ChatGLM/components/Combine.tsx +++ b/src/ChatGLM/components/Combine.tsx @@ -1,23 +1,26 @@ import { memo } from 'react'; -import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import IconCombine, { type IconCombineProps } from '@/IconCombine'; import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; import Color from './Color'; import Mono from './Mono'; import Text from './Text'; -export interface CombineProps extends FlexboxProps { - size?: number; +export interface CombineProps extends Omit { type?: 'color' | 'mono'; } -const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { +const Combine = memo(({ type = 'mono', ...rest }) => { const Icon = type === 'color' ? Color : Mono; return ( - - - - + ); }); diff --git a/src/ChatGLM/index.md b/src/ChatGLM/index.md index 70ea8437..b09d4959 100644 --- a/src/ChatGLM/index.md +++ b/src/ChatGLM/index.md @@ -1,7 +1,8 @@ --- nav: Components group: Icons -title: ChatGLM +title: Zhipu (ChatGLM) +description: https://github.com/THUDM/ChatGLM-6B --- ## Icons @@ -48,6 +49,7 @@ import { Flexbox } from 'react-layout-kit'; export default () => ( + @@ -57,12 +59,19 @@ export default () => ( ## Colors ```tsx -/** - * inline: true - */ import { ChatGLM } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; import ColorPreview from '../components/ColorPreview'; -export default () => ; +export default () => ( + + + + +); ``` + +## APIs + + diff --git a/src/ChatGLM/index.ts b/src/ChatGLM/index.ts index 8e821912..18cfc53a 100644 --- a/src/ChatGLM/index.ts +++ b/src/ChatGLM/index.ts @@ -3,22 +3,24 @@ import Color from './components/Color'; import Combine from './components/Combine'; import Mono from './components/Mono'; import Text from './components/Text'; -import { COLOR_PRIMARY } from './style'; +import { COLOR_GRADIENT, COLOR_PRIMARY } from './style'; -type CompoundedComponent = typeof Mono & { +export type CompoundedIcon = typeof Mono & { Avatar: typeof Avatar; Color: typeof Color; Combine: typeof Combine; Mono: typeof Mono; Text: typeof Text; + colorGradient: string; colorPrimary: string; }; -const Icons = Mono as CompoundedComponent; +const Icons = Mono as CompoundedIcon; Icons.Color = Color; Icons.Text = Text; Icons.Combine = Combine; Icons.Avatar = Avatar; Icons.colorPrimary = COLOR_PRIMARY; +Icons.colorGradient = COLOR_GRADIENT; export default Icons; diff --git a/src/ChatGLM/style.ts b/src/ChatGLM/style.ts index 7d5996e0..5e51c67f 100644 --- a/src/ChatGLM/style.ts +++ b/src/ChatGLM/style.ts @@ -1,3 +1,4 @@ export const TEXT_MULTIPLE = 0.75; export const SPACE_MULTIPLE = 0.1; export const COLOR_PRIMARY = '#4268FA'; +export const COLOR_GRADIENT = 'linear-gradient(-45deg, #3485FF, #504AF4)'; diff --git a/src/Dalle/components/Combine.tsx b/src/Dalle/components/Combine.tsx new file mode 100644 index 00000000..48c29ab4 --- /dev/null +++ b/src/Dalle/components/Combine.tsx @@ -0,0 +1,25 @@ +import { memo } from 'react'; + +import IconCombine, { type IconCombineProps } from '@/IconCombine'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; +import Mono from './Mono'; +import Text from './Text'; + +export type CombineProps = Omit; + +const Combine = memo(({ extraStyle, size = 24, ...rest }) => { + return ( + + ); +}); + +export default Combine; diff --git a/src/Dalle/components/Mono.tsx b/src/Dalle/components/Mono.tsx new file mode 100644 index 00000000..a27ca00a --- /dev/null +++ b/src/Dalle/components/Mono.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Dalle/components/Text.tsx b/src/Dalle/components/Text.tsx new file mode 100644 index 00000000..e2bb19f7 --- /dev/null +++ b/src/Dalle/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Dalle/index.md b/src/Dalle/index.md new file mode 100644 index 00000000..52762915 --- /dev/null +++ b/src/Dalle/index.md @@ -0,0 +1,48 @@ +--- +nav: Components +group: Icons +title: OpenAI (DALL·E) +atomId: Dalle +description: https://openai.com/dall-e-3 +--- + +## Text + +```tsx +import { Dalle } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Dalle } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Dalle } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` + +## APIs + + diff --git a/src/Dalle/index.ts b/src/Dalle/index.ts new file mode 100644 index 00000000..1670b5fb --- /dev/null +++ b/src/Dalle/index.ts @@ -0,0 +1,19 @@ +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; + +Icons.Text = Text; +Icons.Combine = Combine; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/Dalle/style.ts b/src/Dalle/style.ts new file mode 100644 index 00000000..fb3e32d7 --- /dev/null +++ b/src/Dalle/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#000'; diff --git a/src/Editor/index.md b/src/Editor/index.md index f61bab3b..5e85cd12 100644 --- a/src/Editor/index.md +++ b/src/Editor/index.md @@ -2,7 +2,7 @@ nav: Components group: title: Utils - sort: 999 + order: 999 title: Edtior --- diff --git a/src/Gemini/components/Avatar.tsx b/src/Gemini/components/Avatar.tsx new file mode 100644 index 00000000..cd54825e --- /dev/null +++ b/src/Gemini/components/Avatar.tsx @@ -0,0 +1,21 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_GRADIENT } from '../style'; +import Mono from './Mono'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Gemini/components/BrandColor.tsx b/src/Gemini/components/BrandColor.tsx new file mode 100644 index 00000000..eee0f423 --- /dev/null +++ b/src/Gemini/components/BrandColor.tsx @@ -0,0 +1,40 @@ +import { forwardRef } from 'react'; + +import { useFillId } from '@/hooks/useFillId'; +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + const { id, fill } = useFillId('gemini-brand'); + return ( + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Gemini/components/BrandMono.tsx b/src/Gemini/components/BrandMono.tsx new file mode 100644 index 00000000..6d37ce31 --- /dev/null +++ b/src/Gemini/components/BrandMono.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Gemini/components/Color.tsx b/src/Gemini/components/Color.tsx new file mode 100644 index 00000000..443eb548 --- /dev/null +++ b/src/Gemini/components/Color.tsx @@ -0,0 +1,34 @@ +import { forwardRef } from 'react'; + +import { useFillId } from '@/hooks/useFillId'; +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + const { id, fill } = useFillId('gemini'); + return ( + + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Gemini/components/Combine.tsx b/src/Gemini/components/Combine.tsx new file mode 100644 index 00000000..176cdc8d --- /dev/null +++ b/src/Gemini/components/Combine.tsx @@ -0,0 +1,27 @@ +import { memo } from 'react'; + +import IconCombine, { type IconCombineProps } from '@/IconCombine'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; +import Color from './Color'; +import Mono from './Mono'; +import Text from './Text'; + +export interface CombineProps extends Omit { + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + ); +}); + +export default Combine; diff --git a/src/Gemini/components/Mono.tsx b/src/Gemini/components/Mono.tsx new file mode 100644 index 00000000..aeccee77 --- /dev/null +++ b/src/Gemini/components/Mono.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Gemini/components/Text.tsx b/src/Gemini/components/Text.tsx new file mode 100644 index 00000000..6fa4e9eb --- /dev/null +++ b/src/Gemini/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Gemini/index.md b/src/Gemini/index.md new file mode 100644 index 00000000..e81a1f07 --- /dev/null +++ b/src/Gemini/index.md @@ -0,0 +1,91 @@ +--- +nav: Components +group: Icons +title: Google (Gemini) +description: https://deepmind.google/technologies/gemini +--- + +## Icons + +```tsx +import { Gemini } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { Gemini } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Gemini } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Brands + +```tsx +import { Gemini } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Gemini } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + + +); +``` + +## Colors + +```tsx +import { Gemini } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + + +); +``` + +## APIs + + \ No newline at end of file diff --git a/src/Gemini/index.ts b/src/Gemini/index.ts new file mode 100644 index 00000000..63082585 --- /dev/null +++ b/src/Gemini/index.ts @@ -0,0 +1,32 @@ +import Avatar from './components/Avatar'; +import BrandColor from './components/BrandColor'; +import BrandMono from './components/BrandMono'; +import Color from './components/Color'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_GRADIENT, COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Brand: typeof BrandMono; + BrandColor: typeof BrandColor; + Color: typeof Color; + Combine: typeof Combine; + Mono: typeof Mono; + Text: typeof Text; + colorGradient: string; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.Brand = BrandMono; +Icons.BrandColor = BrandColor; +Icons.colorPrimary = COLOR_PRIMARY; +Icons.colorGradient = COLOR_GRADIENT; + +export default Icons; diff --git a/src/Gemini/style.ts b/src/Gemini/style.ts new file mode 100644 index 00000000..ad11eeef --- /dev/null +++ b/src/Gemini/style.ts @@ -0,0 +1,5 @@ +export const TEXT_MULTIPLE = 0.8; +export const SPACE_MULTIPLE = 0.2; + +export const COLOR_PRIMARY = '#1C69FF'; +export const COLOR_GRADIENT = 'linear-gradient(45deg, #1C69FF 40%, #F0DCD6 100%)'; diff --git a/src/IconAvatar/demos/index.tsx b/src/IconAvatar/demos/index.tsx new file mode 100644 index 00000000..211410fe --- /dev/null +++ b/src/IconAvatar/demos/index.tsx @@ -0,0 +1,5 @@ +import { IconAvatar, OpenAI } from '@lobehub/icons'; + +export default () => { + return ; +}; diff --git a/src/IconAvatar/index.md b/src/IconAvatar/index.md new file mode 100644 index 00000000..c23f865f --- /dev/null +++ b/src/IconAvatar/index.md @@ -0,0 +1,14 @@ +--- +nav: Components +group: + title: Components + order: 10 +--- + +## Default + + + +## APIs + + diff --git a/src/IconAvatar/index.tsx b/src/IconAvatar/index.tsx index 26d0f325..229d4b15 100644 --- a/src/IconAvatar/index.tsx +++ b/src/IconAvatar/index.tsx @@ -1,14 +1,31 @@ -import { memo } from 'react'; +import { CSSProperties, memo } from 'react'; import { Flexbox, type FlexboxProps } from 'react-layout-kit'; -export interface IconAvatarProps extends FlexboxProps { +import { IconType } from '@/types'; + +export interface IconAvatarProps extends Omit { + Icon: IconType; background: string; + color?: string; + iconClassName?: string; + iconMultiple?: number; + iconStyle?: CSSProperties; shape?: 'circle' | 'square'; size: number; } const IconAvatar = memo( - ({ shape = 'circle', background, size, style, children }) => { + ({ + shape = 'circle', + color = '#fff', + background, + size, + style, + iconMultiple = 0.75, + Icon, + iconStyle, + iconClassName, + }) => { return ( ( style={{ background, borderRadius: shape === 'circle' ? '50%' : Math.floor(size * 0.1), + color, height: size, width: size, ...style, }} > - {children} + ); }, diff --git a/src/IconCombine/demos/index.tsx b/src/IconCombine/demos/index.tsx new file mode 100644 index 00000000..f96a7f22 --- /dev/null +++ b/src/IconCombine/demos/index.tsx @@ -0,0 +1,15 @@ +import { IconCombine, OpenAI } from '@lobehub/icons'; + +export default () => { + return ( + + ); +}; diff --git a/src/IconCombine/index.md b/src/IconCombine/index.md new file mode 100644 index 00000000..c23f865f --- /dev/null +++ b/src/IconCombine/index.md @@ -0,0 +1,14 @@ +--- +nav: Components +group: + title: Components + order: 10 +--- + +## Default + + + +## APIs + + diff --git a/src/IconCombine/index.tsx b/src/IconCombine/index.tsx new file mode 100644 index 00000000..1f01cbdb --- /dev/null +++ b/src/IconCombine/index.tsx @@ -0,0 +1,49 @@ +import { CSSProperties, memo } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import { IconType } from '@/types'; + +export interface IconCombineProps extends FlexboxProps { + Icon: IconType; + Text: IconType; + extra?: string; + extraClassName?: string; + extraStyle?: CSSProperties; + showLogo?: boolean; + showText?: boolean; + size?: number; + spaceMultiple?: number; + textMultiple?: number; +} +const IconCombine = memo( + ({ + Icon, + Text, + size = 24, + spaceMultiple = 1, + textMultiple = 1, + extra, + extraStyle, + showText = true, + showLogo = true, + extraClassName, + ...rest + }) => { + return ( + + {showLogo && } + {showText && } + {extra && ( + + {extra} + + )} + + ); + }, +); + +export default IconCombine; diff --git a/src/OpenAI/components/Avatar.tsx b/src/OpenAI/components/Avatar.tsx new file mode 100644 index 00000000..21cae058 --- /dev/null +++ b/src/OpenAI/components/Avatar.tsx @@ -0,0 +1,32 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_GPT_3, COLOR_GPT_4, COLOR_PRIMARY } from '../style'; +import Mono from './Mono'; + +export interface AvatarProps extends Omit { + type?: 'normal' | 'gpt3' | 'gpt4'; +} + +const Avatar = memo(({ background, type = 'normal', ...rest }) => { + let bg: string; + + switch (type) { + case 'gpt3': { + bg = COLOR_GPT_3; + break; + } + case 'gpt4': { + bg = COLOR_GPT_4; + break; + } + default: { + bg = background || COLOR_PRIMARY; + } + } + + return ; +}); + +export default Avatar; diff --git a/src/OpenAI/components/Combine.tsx b/src/OpenAI/components/Combine.tsx new file mode 100644 index 00000000..56e57b28 --- /dev/null +++ b/src/OpenAI/components/Combine.tsx @@ -0,0 +1,24 @@ +import { memo } from 'react'; + +import IconCombine, { type IconCombineProps } from '@/IconCombine'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; +import Mono from './Mono'; +import Text from './Text'; + +export type CombineProps = Omit; + +const Combine = memo(({ extraStyle, ...rest }) => { + return ( + + ); +}); + +export default Combine; diff --git a/src/OpenAI/components/Mono.tsx b/src/OpenAI/components/Mono.tsx new file mode 100644 index 00000000..a27ca00a --- /dev/null +++ b/src/OpenAI/components/Mono.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/OpenAI/components/Text.tsx b/src/OpenAI/components/Text.tsx new file mode 100644 index 00000000..29ecc4d8 --- /dev/null +++ b/src/OpenAI/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/OpenAI/index.md b/src/OpenAI/index.md new file mode 100644 index 00000000..4c6d113e --- /dev/null +++ b/src/OpenAI/index.md @@ -0,0 +1,78 @@ +--- +nav: Components +group: Icons +title: OpenAI (ChatGPT) +atomId: OpenAI +description: https://openai.com +--- + +## Icons + +```tsx +import { OpenAI } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ; +``` + +## Text + +```tsx +import { OpenAI } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { OpenAI } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { OpenAI } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + + + +); +``` + +## Colors + +```tsx +/** + * inline: true + */ +import { OpenAI } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + + + +); +``` + +## APIs + + \ No newline at end of file diff --git a/src/OpenAI/index.ts b/src/OpenAI/index.ts new file mode 100644 index 00000000..4df7ed8d --- /dev/null +++ b/src/OpenAI/index.ts @@ -0,0 +1,24 @@ +import Avatar from './components/Avatar'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_GPT_3, COLOR_GPT_4, COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Combine: typeof Combine; + Mono: typeof Mono; + Text: typeof Text; + colorGpt3: string; + colorGpt4: string; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +Icons.colorGpt3 = COLOR_GPT_3; +Icons.colorGpt4 = COLOR_GPT_4; +export default Icons; diff --git a/src/OpenAI/style.ts b/src/OpenAI/style.ts new file mode 100644 index 00000000..800a1f56 --- /dev/null +++ b/src/OpenAI/style.ts @@ -0,0 +1,6 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.1; +export const COLOR_PRIMARY = '#000'; + +export const COLOR_GPT_3 = '#19C37D'; +export const COLOR_GPT_4 = '#AB68FF'; diff --git a/src/Tongyi/components/Avatar.tsx b/src/Tongyi/components/Avatar.tsx index 0fe10ace..700b80c7 100644 --- a/src/Tongyi/components/Avatar.tsx +++ b/src/Tongyi/components/Avatar.tsx @@ -2,16 +2,13 @@ import { memo } from 'react'; import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; -import { COLOR_PRIMARY } from '../style'; +import { COLOR_GRADIENT } from '../style'; import Mono from './Mono'; -const Avatar = memo(({ size = 24, style, background, ...rest }) => { - const bg = background || COLOR_PRIMARY; - return ( - - - - ); +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ; }); export default Avatar; diff --git a/src/Tongyi/components/Color.tsx b/src/Tongyi/components/Color.tsx index 3df9e6f9..0038981f 100644 --- a/src/Tongyi/components/Color.tsx +++ b/src/Tongyi/components/Color.tsx @@ -1,8 +1,10 @@ import { forwardRef } from 'react'; +import { useFillId } from '@/hooks/useFillId'; import type { IconType } from '@/types'; const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + const { id, fill } = useFillId('tongyi'); return ( { {...rest} > - + diff --git a/src/Tongyi/components/Combine.tsx b/src/Tongyi/components/Combine.tsx index 00b44972..bef09a44 100644 --- a/src/Tongyi/components/Combine.tsx +++ b/src/Tongyi/components/Combine.tsx @@ -1,23 +1,27 @@ import { memo } from 'react'; -import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import IconCombine, { type IconCombineProps } from '@/IconCombine'; import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; import Color from './Color'; import Mono from './Mono'; import Text from './Text'; -export interface CombineProps extends FlexboxProps { - size?: number; +export interface CombineProps extends Omit { type?: 'color' | 'mono'; } -const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { +const Combine = memo(({ type = 'mono', extraStyle, ...rest }) => { const Icon = type === 'color' ? Color : Mono; return ( - - - - + ); }); diff --git a/src/Tongyi/components/Text.tsx b/src/Tongyi/components/Text.tsx index a0bcf602..28e870f3 100644 --- a/src/Tongyi/components/Text.tsx +++ b/src/Tongyi/components/Text.tsx @@ -10,7 +10,7 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { height={size} ref={ref} style={{ flex: 'none', lineHeight: 1, width: 'fit-content', ...style }} - viewBox="0 0 86 24" + viewBox="0 0 50 24" xmlns="http://www.w3.org/2000/svg" {...rest} > diff --git a/src/Tongyi/index.md b/src/Tongyi/index.md index 6bc3602c..2a8e9c78 100644 --- a/src/Tongyi/index.md +++ b/src/Tongyi/index.md @@ -1,8 +1,9 @@ --- nav: Components group: Icons -title: 通义 +title: Tongyi (通义) atomId: Tongyi +description: https://tongyi.aliyun.com --- ## Icons @@ -37,6 +38,7 @@ export default () => ( + ); ``` @@ -49,6 +51,7 @@ import { Flexbox } from 'react-layout-kit'; export default () => ( + @@ -58,12 +61,19 @@ export default () => ( ## Colors ```tsx -/** - * inline: true - */ import { Tongyi } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; import ColorPreview from '../components/ColorPreview'; -export default () => ; +export default () => ( + + + + +); ``` + +## APIs + + \ No newline at end of file diff --git a/src/Tongyi/index.ts b/src/Tongyi/index.ts index 8e821912..54fb2601 100644 --- a/src/Tongyi/index.ts +++ b/src/Tongyi/index.ts @@ -3,22 +3,23 @@ import Color from './components/Color'; import Combine from './components/Combine'; import Mono from './components/Mono'; import Text from './components/Text'; -import { COLOR_PRIMARY } from './style'; +import { COLOR_GRADIENT, COLOR_PRIMARY } from './style'; -type CompoundedComponent = typeof Mono & { +export type CompoundedIcon = typeof Mono & { Avatar: typeof Avatar; Color: typeof Color; Combine: typeof Combine; Mono: typeof Mono; Text: typeof Text; + colorGradient: string; colorPrimary: string; }; -const Icons = Mono as CompoundedComponent; +const Icons = Mono as CompoundedIcon; Icons.Color = Color; Icons.Text = Text; Icons.Combine = Combine; Icons.Avatar = Avatar; Icons.colorPrimary = COLOR_PRIMARY; - +Icons.colorGradient = COLOR_GRADIENT; export default Icons; diff --git a/src/Tongyi/style.ts b/src/Tongyi/style.ts index 08bbd3f8..a82d021f 100644 --- a/src/Tongyi/style.ts +++ b/src/Tongyi/style.ts @@ -1,3 +1,4 @@ export const TEXT_MULTIPLE = 0.75; export const SPACE_MULTIPLE = 0.2; export const COLOR_PRIMARY = '#615ced'; +export const COLOR_GRADIENT = 'linear-gradient(to right, #00055F, #6F69F7)'; diff --git a/src/Wenxin/components/Avatar.tsx b/src/Wenxin/components/Avatar.tsx index 0fe10ace..700b80c7 100644 --- a/src/Wenxin/components/Avatar.tsx +++ b/src/Wenxin/components/Avatar.tsx @@ -2,16 +2,13 @@ import { memo } from 'react'; import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; -import { COLOR_PRIMARY } from '../style'; +import { COLOR_GRADIENT } from '../style'; import Mono from './Mono'; -const Avatar = memo(({ size = 24, style, background, ...rest }) => { - const bg = background || COLOR_PRIMARY; - return ( - - - - ); +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ; }); export default Avatar; diff --git a/src/Wenxin/components/Color.tsx b/src/Wenxin/components/Color.tsx index 0bad781c..62c0f3e4 100644 --- a/src/Wenxin/components/Color.tsx +++ b/src/Wenxin/components/Color.tsx @@ -1,8 +1,11 @@ import { forwardRef } from 'react'; +import { useFillId } from '@/hooks/useFillId'; import type { IconType } from '@/types'; const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + const { id, fill } = useFillId('wenxin'); + return ( { {...rest} > - + @@ -22,7 +25,7 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { { type?: 'color' | 'mono'; } -const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { +const Combine = memo(({ type = 'mono', ...rest }) => { const Icon = type === 'color' ? Color : Mono; return ( - - - - + ); }); diff --git a/src/Wenxin/components/Mono.tsx b/src/Wenxin/components/Mono.tsx index ccf2355b..a93f9fc9 100644 --- a/src/Wenxin/components/Mono.tsx +++ b/src/Wenxin/components/Mono.tsx @@ -15,12 +15,6 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { xmlns="http://www.w3.org/2000/svg" {...rest} > - - - - - - ); diff --git a/src/Wenxin/index.md b/src/Wenxin/index.md index 8330c533..39507735 100644 --- a/src/Wenxin/index.md +++ b/src/Wenxin/index.md @@ -1,8 +1,9 @@ --- nav: Components group: Icons -title: 文新 +title: Wenxin (文心) atomId: Wenxin +description: https://yiyan.baidu.com --- ## Icons @@ -37,6 +38,7 @@ export default () => ( + ); ``` @@ -49,6 +51,7 @@ import { Flexbox } from 'react-layout-kit'; export default () => ( + @@ -58,12 +61,19 @@ export default () => ( ## Colors ```tsx -/** - * inline: true - */ import { Wenxin } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; import ColorPreview from '../components/ColorPreview'; -export default () => ; +export default () => ( + + + + +); ``` + +## APIs + + \ No newline at end of file diff --git a/src/Wenxin/index.ts b/src/Wenxin/index.ts index 8e821912..18cfc53a 100644 --- a/src/Wenxin/index.ts +++ b/src/Wenxin/index.ts @@ -3,22 +3,24 @@ import Color from './components/Color'; import Combine from './components/Combine'; import Mono from './components/Mono'; import Text from './components/Text'; -import { COLOR_PRIMARY } from './style'; +import { COLOR_GRADIENT, COLOR_PRIMARY } from './style'; -type CompoundedComponent = typeof Mono & { +export type CompoundedIcon = typeof Mono & { Avatar: typeof Avatar; Color: typeof Color; Combine: typeof Combine; Mono: typeof Mono; Text: typeof Text; + colorGradient: string; colorPrimary: string; }; -const Icons = Mono as CompoundedComponent; +const Icons = Mono as CompoundedIcon; Icons.Color = Color; Icons.Text = Text; Icons.Combine = Combine; Icons.Avatar = Avatar; Icons.colorPrimary = COLOR_PRIMARY; +Icons.colorGradient = COLOR_GRADIENT; export default Icons; diff --git a/src/Wenxin/style.ts b/src/Wenxin/style.ts index 39c50557..309216f0 100644 --- a/src/Wenxin/style.ts +++ b/src/Wenxin/style.ts @@ -1,3 +1,4 @@ export const TEXT_MULTIPLE = 0.75; export const SPACE_MULTIPLE = 0.2; export const COLOR_PRIMARY = '#167ADF'; +export const COLOR_GRADIENT = 'linear-gradient(to right, #0A51C3, #23A4FB)'; diff --git a/src/Zhipu/components/Avatar.tsx b/src/Zhipu/components/Avatar.tsx index 0fe10ace..e7c3a9d6 100644 --- a/src/Zhipu/components/Avatar.tsx +++ b/src/Zhipu/components/Avatar.tsx @@ -5,13 +5,10 @@ import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; import { COLOR_PRIMARY } from '../style'; import Mono from './Mono'; -const Avatar = memo(({ size = 24, style, background, ...rest }) => { - const bg = background || COLOR_PRIMARY; - return ( - - - - ); +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ; }); export default Avatar; diff --git a/src/Zhipu/components/Combine.tsx b/src/Zhipu/components/Combine.tsx index 00b44972..176cdc8d 100644 --- a/src/Zhipu/components/Combine.tsx +++ b/src/Zhipu/components/Combine.tsx @@ -1,23 +1,26 @@ import { memo } from 'react'; -import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import IconCombine, { type IconCombineProps } from '@/IconCombine'; import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; import Color from './Color'; import Mono from './Mono'; import Text from './Text'; -export interface CombineProps extends FlexboxProps { - size?: number; +export interface CombineProps extends Omit { type?: 'color' | 'mono'; } -const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { +const Combine = memo(({ type = 'mono', ...rest }) => { const Icon = type === 'color' ? Color : Mono; return ( - - - - + ); }); diff --git a/src/Zhipu/index.md b/src/Zhipu/index.md index abf059c3..79d67290 100644 --- a/src/Zhipu/index.md +++ b/src/Zhipu/index.md @@ -1,8 +1,9 @@ --- nav: Components group: Icons -title: 智谱清言 +title: Zhipu (智谱清言) atomId: Zhipu +description: https://chatglm.cn --- ## Icons @@ -58,12 +59,18 @@ export default () => ( ## Colors ```tsx -/** - * inline: true - */ import { Zhipu } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; import ColorPreview from '../components/ColorPreview'; -export default () => ; +export default () => ( + + + +); ``` + +## APIs + + \ No newline at end of file diff --git a/src/Zhipu/index.ts b/src/Zhipu/index.ts index 8e821912..ebca4b14 100644 --- a/src/Zhipu/index.ts +++ b/src/Zhipu/index.ts @@ -5,7 +5,7 @@ import Mono from './components/Mono'; import Text from './components/Text'; import { COLOR_PRIMARY } from './style'; -type CompoundedComponent = typeof Mono & { +export type CompoundedIcon = typeof Mono & { Avatar: typeof Avatar; Color: typeof Color; Combine: typeof Combine; @@ -14,7 +14,7 @@ type CompoundedComponent = typeof Mono & { colorPrimary: string; }; -const Icons = Mono as CompoundedComponent; +const Icons = Mono as CompoundedIcon; Icons.Color = Color; Icons.Text = Text; Icons.Combine = Combine; diff --git a/src/components/ColorPreview/index.tsx b/src/components/ColorPreview/index.tsx index 01d73f20..d7a965bf 100644 --- a/src/components/ColorPreview/index.tsx +++ b/src/components/ColorPreview/index.tsx @@ -19,8 +19,9 @@ const useStyles = createStyles(({ css, token, cx }) => { flex: none; - width: 98px; + min-width: 98px; height: 98px; + padding-inline: 16px; font-family: ${token.fontFamilyCode}; line-height: 1; diff --git a/src/hooks/useFillId.ts b/src/hooks/useFillId.ts new file mode 100644 index 00000000..165c821d --- /dev/null +++ b/src/hooks/useFillId.ts @@ -0,0 +1,7 @@ +export const useFillId = (namespace: string) => { + const id = `lobe-icons-${namespace}-fill`; + return { + fill: `url(#${id})`, + id, + }; +}; diff --git a/src/index.ts b/src/index.ts index 0ed28d3e..98c52f22 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,11 @@ -export { default as ChatGLM } from './ChatGLM'; -export { default as Tongyi } from './Tongyi'; +export { default as Anthropic, type CompoundedIcon as AnthropicProps } from './Anthropic'; +export { default as ChatGLM, type CompoundedIcon as ChatGLMProps } from './ChatGLM'; +export { default as Dalle, type CompoundedIcon as DalleProps } from './Dalle'; +export { default as Gemini, type CompoundedIcon as GeminiProps } from './Gemini'; +export { default as IconAvatar, type IconAvatarProps } from './IconAvatar'; +export { default as IconCombine, type IconCombineProps } from './IconCombine'; +export { default as OpenAI, type CompoundedIcon as OpenAIProps } from './OpenAI'; +export { default as Tongyi, type CompoundedIcon as TongyiProps } from './Tongyi'; export type { IconType } from './types'; -export { default as Wenxin } from './Wenxin'; -export { default as Zhipu } from './Zhipu'; +export { default as Wenxin, type CompoundedIcon as WenxinProps } from './Wenxin'; +export { default as Zhipu, type CompoundedIcon as ZhipuProps } from './Zhipu';