8000 ✨ feat: Add Yi and Grok · bentwnghk/lobe-icons@53eff47 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 53eff47

Browse files
canisminor1990canisminor1990
authored
✨ feat: Add Yi and Grok
1 parent e2d643c commit 53eff47

File tree

20 files changed

+478
-35
lines changed

20 files changed

+478
-35
lines changed

‎src/Grok/components/Avatar.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { memo } from 'react';
2+
3+
import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
4+
5+
import { COLOR_PRIMARY, TITLE } from '../style';
6+
import Mono from './Mono';
7+
8+
export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
9+
10+
const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
11+
return (
12+
<IconAvatar
13+
Icon={Mono}
14+
aria-label={TITLE}
15+
background={background || COLOR_PRIMARY}
16+
color={'#000'}
17+
iconMultiple={0.65}
18+
{...rest}
19+
/>
20+
);
21+
});
22+
23+
export default Avatar;

‎src/Grok/components/Combine.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { memo } from 'react';
2+
3+
import IconCombine, { type IconCombineProps } from '@/IconCombine';
4+
5+
import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
6+
import Avatar from './Avatar';
7+
import Text from './Text';
8+
9+
export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
10+
11+
const Combine = memo<CombineProps>(({ ...rest }) => {
12+
return (
13+
<IconCombine
14+
Icon={Avatar}
15+
Text={Text}
16+
aria-label={TITLE}
17+
iconProps={{ shape: 'square', style: { borderRadius: 0 } }}
18+
spaceMultiple={SPACE_MULTIPLE}
19+
textMultiple={TEXT_MULTIPLE}
20+
{...rest}
21+
/>
22+
);
23+
});
24+
25+
export default Combine;

‎src/Grok/components/Mono.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { forwardRef } from 'react';
2+
3+
import type { IconType } from '@/types';
4+
5+
import { TITLE } from '../style';
6+
7+
const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
8+
return (
9+
<svg
10+
fill="currentColor"
11+
fillRule="evenodd"
12+
height={size}
13+
ref={ref}
14+
style={{ flex: 'none', lineHeight: 1, ...style }}
15+
viewBox="0 0 24 24"
16+
width={size}
17+
xmlns="http://www.w3.org/2000/svg"
18+
{...rest}
19+
>
20+
<title>{TITLE}</title>
21+
<path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path>
22+
</svg>
23+
);
24+
});
25+
26+
export default Icon;

‎src/Grok/components/Text.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { forwardRef } from 'react';
2+
3+
import type { IconType } from '@/types';
4+
5+
import { TITLE } from '../style';
6+
7+
const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
8+
return (
9+
<svg
10+
fill="currentColor"
11+
fillRule="evenodd"
12+
height={size}
13+
ref={ref}
14+
style={{ flex: 'none', lineHeight: 1, width: 'fit-content', ...style }}
15+
viewBox="0 0 59 24"
16+
xmlns="http://www.w3.org/2000/svg"
17+
{...rest}
18+
>
19+
<title>{TITLE}</title>
20+
<path d="M15.57 21.352c-1.254.395-2.415.594-3.483.594-2.01 0-3.78-.419-5.31-1.255-1.53-.837-2.709-1.984-3.536-3.442C2.414 15.792 2 14.155 2 12.337c0-2.123.445-3.963 1.334-5.52.89-1.556 2.09-2.748 3.603-3.576C8.449 2.414 10.103 2 11.9 2c1.085 0 2.108.13 3.07.391.96.261 1.822.608 2.588 1.04l-.855 2.401c-.57-.323-1.285-.607-2.148-.85-.863-.243-1.641-.364-2.335-.364-1.494 0-2.815.306-3.963.918a6.401 6.401 0 00-2.655 2.618c-.623 1.133-.934 2.456-.934 3.967 0 1.404.31 2.655.934 3.752a6.42 6.42 0 002.642 2.55c1.138.603 2.437.905 3.896.905.676 0 1.334-.068 1.975-.203.64-.135 1.174-.328 1.601-.58v-3.86h-3.843v-2.51h6.458v7.881c-.538.43-1.356.828-2.455 1.196l-.306.1zm10.701-9.77a6.158 6.158 0 011.668-1.08c.587-.252 1.103-.387 1.548-.405l-.107 2.51c-.8-.036-1.526.126-2.175.486-.65.36-1.156.86-1.52 1.498a4.045 4.045 0 00-.548 2.038v5.101h-2.482V10.556h2.215l.187 2.645a4.9 4.9 0 011.023-1.44l.191-.18zm5.764 1.444a5.671 5.671 0 012.189-2.146c.934-.522 1.988-.783 3.162-.783s2.22.261 3.136.783a5.559 5.559 0 012.134 2.132c.507.9.761 1.908.761 3.023 0 1.116-.253 2.128-.76 3.037a5.506 5.506 0 01-2.149 2.145c-.925.522-1.984.783-3.176.783-1.191 0-2.197-.247-3.122-.742a5.433 5.433 0 01-2.175-2.092c-.525-.9-.787-1.943-.787-3.13 0-.998.217-1.918.65-2.76l.137-.25zm2.189 4.98a3.589 3.589 0 001.28 1.403 3.31 3.31 0 001.802.513c1.032 0 1.885-.369 2.562-1.107.676-.737 1.014-1.655 1.014-2.753 0-1.097-.338-2.02-1.014-2.766-.676-.747-1.53-1.12-2.562-1.12-.676 0-1.281.175-1.815.526-.533.35-.956.823-1.267 1.417a4.12 4.12 0 00-.467 1.943c0 .614.12 1.187.357 1.718l.11.225zm18.16-3.05l4.082-3.32-1.52-1.35-5.712 4.642V2h-2.481v19.73h2.481v-4.184l1.442-1.187 3.415 5.371H57l-4.617-6.775z"></path>
21+
</svg>
22+
);
23+
});
24+
25+
export default Icon;

‎src/Grok/index.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
nav: Components
3+
group: Icons
4+
title: Grok
5+
atomId: Grok
6+
description: https://grok.x.ai
7+
---
8+
9+
## Icons
10+
11+
```tsx
12+
import { Grok } from '@lobehub/icons';
13+
import { Flexbox } from 'react-layout-kit';
14+
15+
export default () => <Grok size={64} />;
16+
```
17+
18+
## Text
19+
20+
```tsx
21+
import { Grok } from '@lobehub/icons';
22+
23+
export default () => <Grok.Text size={48} />;
24+
```
25+
26+
## Combine
27+
28+
```tsx
29+
import { Grok } from '@lobehub/icons';
30+
import { Flexbox } from 'react-layout-kit';
31+
32+
export default () => (
33+
<Flexbox gap={16}>
34+
<Grok.Combine size={64} />
35+
</Flexbox>
36+
);
37+
```
38+
39+
## Avatars
40+
41+
```tsx
42+
import { Grok } from '@lobehub/icons';
43+
import { Flexbox } from 'react-layout-kit';
44+
45+
export default () => (
46+
<Flexbox gap={16} horizontal>
47+
<Grok.Avatar size={64} />
48+
<Grok.Avatar size={64} shape={'square'} />
49+
</Flexbox>
50+
);
51+
```
52+
53+
## Colors
54+
55+
```tsx
56+
import { Grok } from '@lobehub/icons';
57+
import { Flexbox } from 'react-layout-kit';
58+
59+
import ColorPreview from '../components/ColorPreview';
60+
61+
export default () => (
62+
<Flexbox gap={16} horizontal>
63+
<ColorPreview color={Grok.colorPrimary} />
64+
</Flexbox>
65+
);
66+
```

‎src/Grok/index.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Avatar from './components/Avatar';
2+
import Combine from './components/Combine';
3+
import Mono from './components/Mono';
4+
import Text from './components/Text';
5+
import { COLOR_PRIMARY, TITLE } from './style';
6+
7+
export type CompoundedIcon = typeof Mono & {
8+
Avatar: typeof Avatar;
9+
Combine: typeof Combine;
10+
Text: typeof Text;
11+
colorPrimary: string;
12+
title: string;
13+
};
14+
15+
const Icons = Mono as CompoundedIcon;
16+
Icons.Text = Text;
17+
Icons.Combine = Combine;
18+
Icons.Avatar = Avatar;
19+
Icons.colorPrimary = COLOR_PRIMARY;
20+
Icons.title = TITLE;
21+
export default Icons;

‎src/Grok/style.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const TITLE = 'Grok';
2+
export const TEXT_MULTIPLE = 0.75;
3+
export const SPACE_MULTIPLE = 0.25;
4+
export const COLOR_PRIMARY = '#fff';

‎src/Groq/components/Combine.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
1111
const Combine = memo<CombineProps>(({ ...rest }) => {
1212
return (
1313
<IconCombine
14-
Icon={Avatar as any}
15-
Text={Text as any}
14+
Icon={Avatar}
15+
Text={Text}
1616
aria-label={TITLE}
1717
spaceMultiple={SPACE_MULTIPLE}
1818
textMultiple={TEXT_MULTIPLE}

‎src/Groq/index.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ import { Flexbox } from 'react-layout-kit';
3232
export default () => (
3333
<Flexbox gap={16}>
3434
<Groq.Combine size={64} />
35-
<Groq.Combine size={64} type={'color'} />
3635
</Flexbox>
3736
);
3837
```

‎src/IconAvatar/index.tsx

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CSSProperties, memo } from 'react';
1+
import { CSSProperties, forwardRef } from 'react';
22
import { Flexbox, type FlexboxProps } from 'react-layout-kit';
33

44
import { IconType } from '@/types';
@@ -14,23 +14,27 @@ export interface IconAvatarProps extends Omit<FlexboxProps, 'children'> {
1414
size: number;
1515
}
1616

17-
const IconAvatar = memo<IconAvatarProps>(
18-
({
19-
shape = 'circle',
20-
color = '#fff',
21-
background,
22-
size,
23-
style,
24-
iconMultiple = 0.75,
25-
Icon,
26-
iconStyle,
27-
iconClassName,
28-
}) => {
17+
const IconAvatar = forwardRef<HTMLDivElement, IconAvatarProps>(
18+
(
19+
{
20+
shape = 'circle',
21+
color = '#fff',
22+
background,
23+
size,
24+
style,
25+
iconMultiple = 0.75,
26+
Icon,
27+
iconStyle,
28+
iconClassName,
29+
},
30+
ref,
31+
) => {
2932
return (
3033
<Flexbox
3134
align={'center'}
3235
flex={'none'}
3336
justify={'center'}
37+
ref={ref}
3438
style={{
3539
background,
3640
borderRadius: shape === 'circle' ? '50%' : Math.floor(size * 0.1),

‎src/IconCombine/index.tsx

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,60 @@
1-
import { CSSProperties, memo } from 'react';
1+
import { CSSProperties, forwardRef } from 'react';
22
import { Flexbox, type FlexboxProps } from 'react-layout-kit';
33

4+
import IconAvatar, { IconAvatarProps } from '@/IconAvatar';
45
import { IconType } from '@/types';
56

67
export interface IconCombineProps extends FlexboxProps {
7-
Icon: IconType;
8+
Icon: IconType | typeof IconAvatar;
89
Text?: IconType;
910
color?: string;
1011
extra?: string;
1112
extraClassName?: string;
1213
extraStyle?: CSSProperties;
14+
iconProps?: Partial<IconAvatarProps>;
1315
showLogo?: boolean;
1416
showText?: boolean;
1517
size?: number;
1618
spaceMultiple?: number;
1719
textMultiple?: number;
1820
}
19-
const IconCombine = memo<IconCombineProps>(
20-
({
21-
Icon,
22-
style,
23-
Text,
24-
color,
25-
size = 24,
26-
spaceMultiple = 1,
27-
textMultiple = 1,
28-
extra,
29-
extraStyle,
30-
showText = true,
31-
showLogo = true,
32-
extraClassName,
33-
...rest
34-
}) => {
21+
const IconCombine = forwardRef<HTMLDivElement, IconCombineProps>(
22+
(
23+
{
24+
Icon,
25+
style,
26+
Text,
27+
color,
28+
size = 24,
29+
spaceMultiple = 1,
30+
textMultiple = 1,
31+
extra,
32+
extraStyle,
33+
showText = true,
34+
showLogo = true,
35+
extraClassName,
36+
iconProps,
37+
...rest
38+
},
39+
ref,
40+
) => {
3541
return (
3642
<Flexbox
3743
align={'center'}
3844
flex={'none'}
3945
horizontal
4046
justify={'flex-start'}
47+
ref={ref}
4148
style={{ color, ...style }}
4249
{...rest}
4350
>
44-
{showLogo && <Icon size={size} style={{ marginRight: size * spaceMultiple }} />}
51+
{showLogo && (
52+
<Icon
53+
size={size}
54+
{...(iconProps as any)}
55+
style={{ marginRight: size * spaceMultiple, ...iconProps?.style }}
56+
/>
57+
)}
4558
{showText && Text && <Text size={size * textMultiple} />}
4659
{extra && (
4760
<span

‎src/Yi/components/Avatar.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { memo } from 'react';
2+
3+
import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
4+
5+
import { COLOR_PRIMARY, TITLE } from '../style';
6+
import Color from './Color';
7+
8+
export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
9+
10+
const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
11+
return (
12+
<IconAvatar
13+
Icon={Color}
14+
aria-label={TITLE}
15+
background={background || COLOR_PRIMARY}
16+
color={'#fff'}
17+
iconMultiple={0.6}
18+
{...rest}
19+
/>
20+
);
21+
});
22+
23+
export default Avatar;

‎src/Yi/components/Color.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { forwardRef } from 'react';
2+
3+
import type { IconType } from '@/types';
4+
5+
import { TITLE } from '../style';
6+
7+
const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
8+
return (
9+
<svg
10+
fill="currentColor"
11+
fillRule="evenodd"
12+
height={size}
13+
ref={ref}
14+
style={{ flex: 'none', lineHeight: 1, ...style }}
15+
viewBox="0 0 24 24"
16+
width={size}
17+
xmlns="http://www.w3.org/2000/svg"
18+
{...rest}
19+
>
20+
<title>{TITLE}</title>
21+
<g>
22+
<path d="M18.62 13.927c.611 0 1.107.505 1.107 1.128v5.817c0 .623-.496 1.128-1.108 1.128a1.118 1.118 0 01-1.108-1.128v-5.817c0-.623.496-1.128 1.108-1.128zM16.59 3.052a1.094 1.094 0 011.562-.129c.466.404.522 1.116.126 1.59l-5.938 7.111v9.147c0 .624-.496 1.129-1.108 1.129a1.118 1.118 0 01-1.108-1.129v-9.477l.003-.088.01-.087c.015-.232.102-.462.261-.654l6.192-7.413zM2.906 2.256a1.094 1.094 0 011.559.157l4.387 5.45a1.142 1.142 0 01-.155 1.587 1.094 1.094 0 01-1.559-.157l-4.387-5.45a1.144 1.144 0 01.06-1.498l.095-.09z"></path>
23+
<ellipse cx="20.146" cy="10.692" fill="#00FF25" rx="1.354" ry="1.379"></ellipse>
24+
</g>
25+
</svg>
26+
);
27+
});
28+
29+
export default Icon;

0 commit comments

Comments
 (0)
0