✨ feat: Add Yi and Grok

src/Grok/components/Avatar.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
+import { COLOR_PRIMARY, 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 || COLOR_PRIMARY}
+      color={'#000'}
+      iconMultiple={0.65}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Grok/components/Combine.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Avatar from './Avatar';
+import Text from './Text';
+
+export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+
+const Combine = memo<CombineProps>(({ ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Avatar}
+      Text={Text}
+      aria-label={TITLE}
+      iconProps={{ shape: 'square', style: { borderRadius: 0 } }}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Grok/components/Mono.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      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="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>
+    </svg>
+  );
+});
+
+export default Icon;

src/Grok/components/Text.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, width: 'fit-content', ...style }}
+      viewBox="0 0 59 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <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>
+    </svg>
+  );
+});
+
+export default Icon;

src/Grok/index.md

@@ -0,0 +1,66 @@
+---
+nav: Components
+group: Icons
+title: Grok
+atomId: Grok
+description: https://grok.x.ai
+---
+
+## Icons
+
+```tsx
+import { Grok } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => <Grok size={64} />;
+```
+
+## Text
+
+```tsx
+import { Grok } from '@lobehub/icons';
+
+export default () => <Grok.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { Grok } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16}>
+    <Grok.Combine size={64} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Grok } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Grok.Avatar size={64} />
+    <Grok.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Grok } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Grok.colorPrimary} />
+  </Flexbox>
+);
+```

src/Grok/index.ts

@@ -0,0 +1,21 @@
+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;

src/Grok/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'Grok';
+export const TEXT_MULTIPLE = 0.75;
+export const SPACE_MULTIPLE = 0.25;
+export const COLOR_PRIMARY = '#fff';

src/Groq/components/Combine.tsx

@@ -11,8 +11,8 @@ export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
 const Combine = memo<CombineProps>(({ ...rest }) => {
   return (
     <IconCombine
-      Icon={Avatar as any}
-      Text={Text as any}
+      Icon={Avatar}
+      Text={Text}
       aria-label={TITLE}
       spaceMultiple={SPACE_MULTIPLE}
       textMultiple={TEXT_MULTIPLE}

src/Groq/index.md

@@ -32,7 +32,6 @@ import { Flexbox } from 'react-layout-kit';
 export default () => (
   <Flexbox gap={16}>
     <Groq.Combine size={64} />
-    <Groq.Combine size={64} type={'color'} />
   </Flexbox>
 );
 ```

src/IconAvatar/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, memo } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import { Flexbox, type FlexboxProps } from 'react-layout-kit';
 
 import { IconType } from '@/types';
@@ -14,23 +14,27 @@ export interface IconAvatarProps extends Omit<FlexboxProps, 'children'> {
   size: number;
 }
 
-const IconAvatar = memo<IconAvatarProps>(
-  ({
-    shape = 'circle',
-    color = '#fff',
-    background,
-    size,
-    style,
-    iconMultiple = 0.75,
-    Icon,
-    iconStyle,
-    iconClassName,
-  }) => {
+const IconAvatar = forwardRef<HTMLDivElement, IconAvatarProps>(
+  (
+    {
+      shape = 'circle',
+      color = '#fff',
+      background,
+      size,
+      style,
+      iconMultiple = 0.75,
+      Icon,
+      iconStyle,
+      iconClassName,
+    },
+    ref,
+  ) => {
     return (
       <Flexbox
         align={'center'}
         flex={'none'}
         justify={'center'}
+        ref={ref}
         style={{
           background,
           borderRadius: shape === 'circle' ? '50%' : Math.floor(size * 0.1),

src/IconCombine/index.tsx

@@ -1,47 +1,60 @@
-import { CSSProperties, memo } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import { Flexbox, type FlexboxProps } from 'react-layout-kit';
 
+import IconAvatar, { IconAvatarProps } from '@/IconAvatar';
 import { IconType } from '@/types';
 
 export interface IconCombineProps extends FlexboxProps {
-  Icon: IconType;
+  Icon: IconType | typeof IconAvatar;
   Text?: IconType;
   color?: string;
   extra?: string;
   extraClassName?: string;
   extraStyle?: CSSProperties;
+  iconProps?: Partial<IconAvatarProps>;
   showLogo?: boolean;
   showText?: boolean;
   size?: number;
   spaceMultiple?: number;
   textMultiple?: number;
 }
-const IconCombine = memo<IconCombineProps>(
-  ({
-    Icon,
-    style,
-    Text,
-    color,
-    size = 24,
-    spaceMultiple = 1,
-    textMultiple = 1,
-    extra,
-    extraStyle,
-    showText = true,
-    showLogo = true,
-    extraClassName,
-    ...rest
-  }) => {
+const IconCombine = forwardRef<HTMLDivElement, IconCombineProps>(
+  (
+    {
+      Icon,
+      style,
+      Text,
+      color,
+      size = 24,
+      spaceMultiple = 1,
+      textMultiple = 1,
+      extra,
+      extraStyle,
+      showText = true,
+      showLogo = true,
+      extraClassName,
+      iconProps,
+      ...rest
+    },
+    ref,
+  ) => {
     return (
       <Flexbox
         align={'center'}
         flex={'none'}
         horizontal
         justify={'flex-start'}
+        ref={ref}
         style={{ color, ...style }}
         {...rest}
       >
-        {showLogo && <Icon size={size} style={{ marginRight: size * spaceMultiple }} />}
+        {showLogo && (
+          <Icon
+            size={size}
+            {...(iconProps as any)}
+            style={{ marginRight: size * spaceMultiple, ...iconProps?.style }}
+          />
+        )}
         {showText && Text && <Text size={size * textMultiple} />}
         {extra && (
           <span

src/Yi/components/Avatar.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Color from './Color';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Color}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      color={'#fff'}
+      iconMultiple={0.6}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Yi/components/Color.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <g>
+        <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>
+        <ellipse cx="20.146" cy="10.692" fill="#00FF25" rx="1.354" ry="1.379"></ellipse>
+      </g>
+    </svg>
+  );
+});
+
+export default Icon;