✨ feat: Add Recraft

src/Recraft/components/Avatar.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/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={'#fff'}
+      iconMultiple={0.6}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Recraft/components/Combine.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/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>(({ iconProps, ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Avatar}
+      Text={Text as any}
+      aria-label={TITLE}
+      iconProps={{
+        shape: 'square',
+        ...iconProps,
+      }}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Recraft/components/Mono.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+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="M19.667 8.275c0-4.57-4.15-8.275-9.27-8.275-1.774 0-3.213 3.705-3.213 8.275 0 1.143.09 2.233.253 3.224H4.29L1 23h9.4v-6.447c5.117 0 9.266-3.707 9.266-8.275l.001-.002zm-9.27-6.76c.93 0 1.682 3.028 1.682 6.76 0 3.733-.752 6.76-1.681 6.76-.93 0-1.681-3.027-1.681-6.76 0-3.732.752-6.76 1.68-6.76z" />
+      <path d="M19.848 16.552h-9.44L14.028 23h9.438l-3.618-6.448z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/Recraft/components/Text.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+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 89 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M87.163 11.996l-2.881-9.99h-9.784l-.807 2.779C72.214 3.091 69.906 2 67.31 2c-1.544 0-2.798 3.217-2.798 7.185v.406l-4.179-7.585h-2.282l-4.151 14.397h-7.439c4.44-.018 8.032-3.228 8.032-7.185 0-3.957-3.612-7.185-8.069-7.185-1.545 0-2.798 3.217-2.798 7.185 0 .993.078 1.939.22 2.8h-1.183v-.014h-1.62v.013c0 4.74-1.27 8.581-2.837 8.581-1.567 0-2.837-3.842-2.837-8.581 0-4.74 1.27-8.582 2.837-8.582 1.035 0 1.94 1.677 2.436 4.182h1.566c-.726-3.308-2.245-5.585-4.002-5.585-3.634 0-6.786 2.195-8.348 5.405-.74-3.21-2.237-5.405-3.961-5.405-3.932 0-7.299 2.569-8.699 6.213-.528-3.513-3.912-6.224-8.007-6.224-1.548 0-2.802 3.218-2.802 7.186 0 .993.079 1.938.22 2.799H3.87L1 21.989h8.194v-5.597l3.156 5.597h8.227l-2.525-4.48h.002c1.68 2.705 4.565 4.49 7.842 4.49h.002c1.724 0 3.22-2.194 3.961-5.404 1.562 3.21 4.713 5.404 8.346 5.405h.002l.038-.001h8.183v-5.597L49.58 22h8.216l-.015-.027h2.393v-4.264h2.057l1.229 4.265h7.878l-2.416-4.385h3.687l-1.27 4.384 11.553.002-5.124-17.758 9.395 7.78zm-77.971 3.08c-.81 0-1.466-2.628-1.466-5.87 0-3.24.656-5.869 1.466-5.869.81 0 1.466 2.628 1.466 5.87 0 3.241-.656 5.869-1.466 5.869zm.037 1.316c3.22-.013 5.994-1.701 7.279-4.134.033 1.482.37 2.883.947 4.138h-.03l-.003-.004H9.23zM25.898 3.434c1.417 0 2.59 3.143 2.802 7.25h-5.604c.211-4.107 1.385-7.25 2.802-7.25zm2.438 12.97c-.495 2.511-1.401 4.194-2.438 4.194-1.567 0-2.836-3.841-2.837-8.58h5.754c0 1.573.343 3.061.953 4.385h-1.432zm18.09-1.317c-.809 0-1.464-2.628-1.464-5.87 0-3.24.656-5.868 1.464-5.868.808 0 1.463 2.628 1.463 5.869 0 3.241-.655 5.869-1.463 5.869zm13.748 1.289v-5.808l1.674 5.808h-1.674zm11.226-4.39h-5.565l.013-2.8c0-3.242.656-5.87 1.464-5.87.808 0 1.464 2.628 1.464 5.87h6.267l-1.775 6.124-1.87-3.323h.002zm3.914-3.734a6.673 6.673 0 00-1.212-2.95l2.383-1.093-1.171 4.044v-.001z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/Recraft/index.md

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

src/Recraft/index.ts

@@ -0,0 +1,23 @@
+'use client';
+
+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/Recraft/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'Recraft';
+export const TEXT_MULTIPLE = 0.7;
+export const SPACE_MULTIPLE = 0.2;
+export const COLOR_PRIMARY = '#000';

src/icons.ts

@@ -81,6 +81,7 @@ export { default as Poe, type CompoundedIcon as PoeProps } from './Poe';
 export { default as Pollinations, type CompoundedIcon as PollinationsProps } from './Pollinations';
 export { default as Qingyan, type CompoundedIcon as QingyanProps } from './Qingyan';
 export { default as Qwen, type CompoundedIcon as QwenProps } from './Qwen';
+export { default as Recraft, type CompoundedIcon as RecraftProps } from './Recraft';
 export { default as Replicate, type CompoundedIcon as ReplicateProps } from './Replicate';
 export { default as Replit, type CompoundedIcon as ReplitProps } from './Replit';
 export { default as Runway, type CompoundedIcon as RunwayProps } from './Runway';

src/toc.ts

@@ -1563,6 +1563,25 @@ const toc: IconToc[] = [
     },
     title: 'Qwen',
   },
+  {
+    color: '#000',
+    desc: 'https://recraft.ai',
+    docsUrl: 'recraft',
+    fullTitle: 'Recraft',
+    group: 'application',
+    id: 'Recraft',
+    param: {
+      hasAvatar: true,
+      hasBrand: false,
+      hasBrandColor: false,
+      hasColor: false,
+      hasCombine: true,
+      hasText: true,
+      hasTextCn: false,
+      hasTextColor: false,
+    },
+    title: 'Recraft',
+  },
   {
     color: '#EA2805',
     desc: 'https://replicate.com',