Skip to content

Commit 8da1280

Browse files
canisminor1990canisminor1990
committed
✨ feat: Add IBM Granite, Skywork
1 parent b2c5c5f commit 8da1280

File tree

18 files changed

+499
-0
lines changed

18 files changed

+499
-0
lines changed

‎src/IBM/components/Avatar.tsx

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

‎src/IBM/components/Combine.tsx

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

‎src/IBM/components/Mono.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
import { memo } from 'react';
4+
5+
import type { IconType } from '@/types';
6+
7+
import { TITLE } from '../style';
8+
9+
const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
10+
return (
11+
<svg
12+
fill="currentColor"
13+
fillRule="evenodd"
14+
height={size}
15+
style={{ flex: 'none', lineHeight: 1, ...style }}
16+
viewBox="0 0 24 24"
17+
width={size}
18+
xmlns="http://www.w3.org/2000/svg"
19+
{...rest}
20+
>
21+
<title>{TITLE}</title>
22+
<path
23+
clipRule="evenodd"
24+
d="M24 16.333V17h-3.158v-.667H24zm-7.579 0V17h-3.158v-.667h3.158zm2.464 0L18.63 17l-.25-.667h.504zm-7.075 0a2.528 2.528 0 01-1.717.667h-5.04v-.667h6.757zm-7.389 0V17H0v-.667h4.421zm12-1.333v.667h-3.158V15h3.158zm2.958 0l-.246.667h-1L17.885 15h1.494zm-6.937 0c-.057.237-.148.46-.265.667H5.053V15h7.39zm-8.02 0v.667H0V15h4.421zM24 15v.667h-3.158V15H24zm-1.263-1.333v.666h-1.895v-.666h1.895zm-6.316 0v.666h-1.895v-.666h1.895zm3.453 0l-.248.666h-1.989l-.25-.666h2.487zm-7.52 0c.056.212.088.435.088.666h-2.337v-.666h2.249zm-4.143 0v.666H6.316v-.666H8.21zm-5.053 0v.666H1.263v-.666h1.895zm19.579-1.334V13h-1.895v-.667h1.895zm-6.316 0V13h-1.895v-.667h1.895zm3.948 0l-.247.667h-2.987l-.245-.667h3.48zm-8.792 0c.218.188.405.414.55.667H6.315v-.667h5.26zm-8.42 0V13H1.264v-.667h1.895zM18.456 11l.177.539.176-.539h3.929v.667h-1.895v-.613l-.215.613H16.63l-.209-.613v.613h-1.895V11h3.929zM3.158 11v.667H1.263V11h1.895zm8.968 0a2.555 2.555 0 01-.55.667h-5.26V11h5.81zm10.61-1.333v.666h-3.709l.224-.666h3.486zm-4.722 0l.224.666h-3.712v-.666h3.488zm-5.572 0c0 .23-.032.454-.088.666h-2.249v-.666h2.337zm-4.231 0v.666H6.316v-.666H8.21zm-5.053 0v.666H1.263v-.666h1.895zm14.419-1.334l.22.667h-4.534v-.667h4.314zm6.423 0V9h-4.536l.229-.667H24zm-11.823 0c.117.206.208.43.265.667h-7.39v-.667h7.125zm-7.756 0V9H0v-.667h4.421zM17.133 7l.224.667h-4.094V7h3.87zM24 7v.667h-4.089L20.13 7H24zM10.093 7c.662 0 1.264.253 1.717.667H5.053V7h5.04zM4.42 7v.667H0V7h4.421z"
25+
/>
26+
</svg>
27+
);
28+
});
29+
30+
export default Icon;

‎src/IBM/components/Text.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client';
2+
3+
import { memo } from 'react';
4+
5+
import type { IconType } from '@/types';
6+
7+
import { TITLE } from '../style';
8+
9+
const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
10+
return (
11+
<svg
12+
fill="currentColor"
13+
fillRule="evenodd"
14+
height={size}
15+
style={{ flex: 'none', lineHeight: 1, ...style }}
16+
viewBox="0 0 54 24"
17+
xmlns="http://www.w3.org/2000/svg"
18+
{...rest}
19+
>
20+
<title>{TITLE}</title>
21+
<path
22+
clipRule="evenodd"
23+
d="M52 20.667V22h-6.579v-1.333H52zm-15.79 0V22h-6.578v-1.333h6.579zm5.134 0L40.814 22l-.522-1.333h1.052zm-14.739 0A5.39 5.39 0 0123.026 22h-10.5v-1.333h14.08zm-15.395 0V22H2v-1.333h9.21zm25-2.667v1.333h-6.578V18h6.579zm6.162 0l-.512 1.333h-2.083L39.26 18h3.111zm-14.45 0a4.994 4.994 0 01-.554 1.333H12.526V18h15.395zM11.21 18v1.333H2V18h9.21zM52 18v1.333h-6.579V18H52zm-2.632-2.667v1.334h-3.947v-1.334h3.947zm-13.157 0v1.334h-3.948v-1.334h3.948zm7.194 0l-.517 1.334h-4.144l-.52-1.334h5.18zm-15.668 0c.118.425.184.872.184 1.334h-4.868v-1.334h4.684zm-8.632 0v1.334h-3.947v-1.334h3.947zm-10.526 0v1.334H4.632v-1.334h3.947zm40.79-2.666V14H45.42v-1.333h3.947zm-13.158 0V14h-3.948v-1.333h3.948zm8.225 0L43.92 14h-6.224l-.51-1.333h7.249zm-18.318 0A5.16 5.16 0 0127.263 14H15.158v-1.333h10.96zm-17.54 0V14H4.633v-1.333h3.947zM40.449 10l.368 1.078.368-1.078h8.184v1.333h-3.947v-1.225l-.447 1.225h-8.33l-.433-1.225v1.225h-3.948V10h8.184zm-31.87 0v1.333H4.633V10h3.947zm18.685 0c-.3.506-.69.957-1.145 1.333h-10.96V10h12.105zm22.105-2.667v1.334h-7.727l.465-1.334h7.262zm-9.838 0l.465 1.334h-7.732V7.333h7.267zm-11.609 0c0 .462-.066.908-.184 1.334h-4.684V7.333h4.868zm-8.816 0v1.334h-3.947V7.333h3.947zm-10.526 0v1.334H4.632V7.333h3.947zm30.04-2.666L39.075 6h-9.444V4.667h8.986zm13.381 0V6h-9.45l.476-1.333H52zm-24.632 0c.245.411.434.859.553 1.333H12.526V4.667h14.842zm-16.157 0V6H2V4.667h9.21zM37.694 2l.467 1.333h-8.53V2h8.063zM52 2v1.333h-8.518L43.937 2H52zM23.026 2a5.41 5.41 0 013.58 1.333h-14.08V2h10.5zM11.21 2v1.333H2V2h9.21z"
24+
/>
25+
</svg>
26+
);
27+
});
28+
29+
export default Icon;

‎src/IBM/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: Provider
4+
title: IBM (Granite)
5+
atomId: IBM
6+
description: https://huggingface.co/ibm-granite
7+
---
8+
9+
## Icons
10+
11+
```tsx
12+
import { IBM } from '@lobehub/icons';
13+
import { Flexbox } from 'react-layout-kit';
14+
15+
export default () => <IBM size={64} />;
16+
```
17+
18+
## Text
19+
20+
```tsx
21+
import { IBM } from '@lobehub/icons';
22+
23+
export default () => <IBM.Text size={48} />;
24+
```
25+
26+
## Combine
27+
28+
```tsx
29+
import { IBM } from '@lobehub/icons';
30+
import { Flexbox } from 'react-layout-kit';
31+
32+
export default () => (
33+
<Flexbox gap={16} align={'flex-start'}>
34+
<IBM.Combine size={64} />
35+
</Flexbox>
36+
);
37+
```
38+
39+
## Avatars
40+
41+
```tsx
42+
import { IBM } from '@lobehub/icons';
43+
import { Flexbox } from 'react-layout-kit';
44+
45+
export default () => (
46+
<Flexbox gap={16} horizontal>
47+
<IBM.Avatar size={64} />
48+
<IBM.Avatar size={64} shape={'square'} />
49+
</Flexbox>
50+
);
51+
```
52+
53+
## Colors
54+
55+
```tsx
56+
import { IBM } 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={IBM.colorPrimary} />
64+
</Flexbox>
65+
);
66+
```

‎src/IBM/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/IBM/style.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const TITLE = 'IBM';
2+
export const COMBINE_TEXT_MULTIPLE = 1;
3+
export const COMBINE_SPACE_MULTIPLE = 0;
4+
export const COLOR_PRIMARY = '#0F62FE';
5+
6+
// Avatar constants
7+
export const AVATAR_BACKGROUND = COLOR_PRIMARY;
8+
export const AVATAR_COLOR = '#fff';
9+
export const AVATAR_ICON_MULTIPLE = 0.75;

‎src/Skywork/components/Avatar.tsx

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

‎src/Skywork/components/Color.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
'use client';
2+
3+
import { memo } from 'react';
4+
5+
import type { IconType } from '@/types';
6+
7+
import { TITLE } from '../style';
8+
9+
const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
10+
return (
11+
<svg
12+
height={size}
13+
style={{ flex: 'none', lineHeight: 1, ...style }}
14+
viewBox="0 0 24 24"
15+
width={size}
16+
xmlns="http://www.w3.org/2000/svg"
17+
{...rest}
18+
>
19+
<title>{TITLE}</title>
20+
<path
21+
d="M13.433 1.756a8.316 8.316 0 00-10.69.392 8.335 8.335 0 00-.598 11.765 8.317 8.317 0 0010.596 1.476L6.278 8.226l7.155-6.47z"
22+
fill="#4D5EFF"
23+
/>
24+
<path
25+
d="M10.568 21.742a8.316 8.316 0 0010.688-.392 8.336 8.336 0 00.598-11.765 8.317 8.317 0 00-10.596-1.476l6.463 7.163-7.155 6.47h.002z"
26+
fill="#00FFCE"
27+
/>
28+
</svg>
29+
);
30+
});
31+
32+
export default Icon;

‎src/Skywork/components/Combine.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
import { memo } from 'react';
4+
5+
import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
6+
7+
import { COMBINE_SPACE_MULTIPLE, COMBINE_TEXT_MULTIPLE, TITLE } from '../style';
8+
import Color from './Color';
9+
import Mono from './Mono';
10+
import Text from './Text';
11+
12+
export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
13+
type?: 'color' | 'mono';
14+
}
15+
const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
16+
const Icon = type === 'color' ? Color : Mono;
17+
18+
return (
19+
<IconCombine
20+
Icon={Icon}
21+
Text={Text}
22+
aria-label={TITLE}
23+
spaceMultiple={COMBINE_SPACE_MULTIPLE}
24+
textMultiple={COMBINE_TEXT_MULTIPLE}
25+
{...rest}
26+
/>
27+
);
28+
});
29+
30+
export default Combine;

0 commit comments

Comments
 (0)