✨ feat: Add FalAI (resolve #58)

.dumirc.ts

@@ -79,6 +79,7 @@ export default defineConfig({
   favicons: ['https://lobehub.com/favicon.ico'],
   jsMinifier: 'swc',
   locales: [{ id: 'en-US', name: 'English' }],
+  mako: isWin ? false : {},
   mfsu: isWin ? undefined : {},
   npmClient: 'pnpm',
   publicPath: '/',

src/Fal/components/Avatar.tsx

@@ -0,0 +1,24 @@
+'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 || '#FFC4D8'}
+      color={COLOR_PRIMARY}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Fal/components/Combine.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Mono from './Mono';
+import Text from './Text';
+
+export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+
+const Combine = memo<CombineProps>(({ ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Mono}
+      Text={Text as any}
+      aria-label={TITLE}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Fal/components/Mono.tsx

@@ -0,0 +1,31 @@
+'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
+        clipRule="evenodd"
+        d="M15.477 0c.415 0 .749.338.788.752a7.775 7.775 0 006.985 6.984c.413.04.752.373.752.788v6.952c0 .415-.338.748-.752.788a7.775 7.775 0 00-6.985 6.984c-.04.414-.373.752-.788.752H8.525c-.416 0-.749-.338-.789-.752a7.775 7.775 0 00-6.984-6.984c-.414-.04-.752-.373-.752-.788V8.524c0-.415.338-.748.752-.788A7.775 7.775 0 007.736.752C7.776.338 8.11 0 8.526 0h6.95zM4.819 11.98a7.226 7.226 0 007.223 7.23 7.226 7.226 0 007.223-7.23c0-3.994-3.234-7.23-7.223-7.23a7.227 7.227 0 00-7.223 7.23z"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Fal/components/Text.tsx

@@ -0,0 +1,31 @@
+'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 31 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M2.679 11.307c.966 0 1.175.053 1.175.55v7.503c0 2.326.052 2.43.261 2.43h3.63c.21 0 .288-.104.288-2.43v-7.504c0-.496.183-.549 1.358-.549h1.201c.183 0 .21-.13.21-1.202v-.183c0-1.072 0-1.177-.236-1.177H9.391c-1.175 0-1.358-.078-1.358-.549v-1.62c0-1.465.522-1.883 1.358-1.883.463 0 .784.128.95.195.06.024.1.04.12.04.079 0 .079-.235.079-1.229v-.34c0-.967 0-1.045-.052-1.098-.13-.078-.94-.261-2.116-.261-2.977 0-4.518 1.516-4.518 4.575v1.621c0 .47-.13.55-1.097.55H2.21C2.026 8.745 2 8.85 2 9.921v.183c0 1.071.026 1.202.209 1.202h.47zM28.625 4.693V19.36c0 2.326-.026 2.431-.314 2.431H24.76c-.288 0-.34-.105-.34-2.431V4.693c0-2.327.052-2.431.34-2.431h3.551c.288 0 .314.104.314 2.431z" />
+      <path
+        clipRule="evenodd"
+        d="M18.666 13.268v-.549c0-1.307-.6-1.83-1.645-1.83-1.019 0-1.567.549-1.724 1.516a3.26 3.26 0 00-.029.207c-.022.186-.037.316-.154.316H11.59c-.21 0-.21-.052-.21-.235 0-1.386 1.307-4.262 5.85-4.262 3.213 0 5.512 1.281 5.512 4.837v5.229c0 .834.313 1.906.506 2.564.085.29.146.5.146.573 0 .104-.078.157-.157.157H19.32c-.183 0-.209-.105-.34-.758l-.104-.497c-.078-.392-.13-.523-.287-.523-.107 0-.194.123-.33.317-.13.186-.304.435-.584.703-.627.575-1.384.967-2.69.967-2.116 0-4.022-1.203-4.022-3.817 0-2.928 2.272-4.183 5.641-4.314.368-.016.673-.021.924-.025.944-.015 1.14-.019 1.14-.576zm0 3.79v-.522c0-.523-.13-.68-.574-.654l-.967.053c-1.227.078-1.958.705-1.958 1.882 0 1.15.627 1.726 1.54 1.726 1.02 0 1.96-.942 1.96-2.484z"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Fal/index.md

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

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

@@ -0,0 +1,4 @@
+export const TITLE = 'Fal';
+export const TEXT_MULTIPLE = 1.1;
+export const SPACE_MULTIPLE = 0.2;
+export const COLOR_PRIMARY = '#EC0648';

src/icons.ts

@@ -37,6 +37,7 @@ export { default as DeepMind, type CompoundedIcon as DeepMindProps } from './Dee
 export { default as DeepSeek, type CompoundedIcon as DeepSeekProps } from './DeepSeek';
 export { default as Dify, type CompoundedIcon as DifyProps } from './Dify';
 export { default as Doubao, type CompoundedIcon as DoubaoProps } from './Doubao';
+export { default as Fal, type CompoundedIcon as FalProps } from './Fal';
 export { default as Fireworks, type CompoundedIcon as FireworksProps } from './Fireworks';
 export { default as FishAudio, type CompoundedIcon as FishAudioProps } from './FishAudio';
 export { default as Flux, type CompoundedIcon as FluxProps } from './Flux';

src/toc.ts

@@ -771,6 +771,25 @@ const toc: IconToc[] = [
     },
     title: 'Doubao',
   },
+  {
+    color: '#EC0648',
+    desc: 'https://fal.ai',
+    docsUrl: 'fal',
+    fullTitle: 'Fal',
+    group: 'provider',
+    id: 'Fal',
+    param: {
+      hasAvatar: true,
+      hasBrand: false,
+      hasBrandColor: false,
+      hasColor: false,
+      hasCombine: true,
+      hasText: true,
+      hasTextCn: false,
+      hasTextColor: false,
+    },
+    title: 'Fal',
+  },
   {
     color: '#000',
     colorGradient: 'linear-gradient(to bottom, #952C78,  #050003)',