✨ feat: Add LiveKit (resolve lobehub#61)

Author: canisminor1990

src/LiveKit/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 Color from './Color';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Color}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      iconMultiple={0.65}
+      size={size}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/LiveKit/components/Color.tsx

@@ -0,0 +1,30 @@
+'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
+      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="M14 10h-4v4h4v-4zM18 6h-4v4.001h4v-4zM18 14h-4v4h4v-4zM22 2h-4v4h4V2zM22 18h-4v4h4v-4z"
+        fill="#1FD5F9"
+      />
+      <path d="M6 18V2H2v20h12v-4H6z" fill="#fff" />
+    </svg>
+  );
+});
+
+export default Icon;

src/LiveKit/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 Color from './Color';
+import Mono from './Mono';
+import Text from './Text';
+
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'color' | 'mono';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
+  const Icon = type === 'color' ? Color : Mono;
+
+  return (
+    <IconCombine
+      Icon={Icon}
+      Text={Text}
+      aria-label={TITLE}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/LiveKit/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="M14 10h-4v4h4v-4zM18 6h-4v4.001h4v-4zM18 14h-4v4h4v-4zM22 2h-4v4h4V2zM22 18h-4v4h4v-4z" />
+      <path d="M6 18V2H2v20h12v-4H6z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/LiveKit/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 100 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M5.693 0H2v21.686h13.357v-3.143H5.693V0zm15.793 9.821H17.95v11.786h3.536V9.821zm10.528 11.393L27.457 6.286H24l4.714 15.4h6.757l4.715-15.4H36.57l-4.557 14.928zM48.986 5.971c-4.636 0-7.543 3.3-7.543 8.015C41.443 18.7 44.27 22 48.986 22c3.614 0 6.285-1.571 7.228-4.871H52.6c-.55 1.492-1.571 2.357-3.536 2.357-2.2 0-3.693-1.572-3.928-4.479H56.45l.079-1.1c0-4.793-2.986-7.936-7.543-7.936zm-3.929 6.6c.393-2.828 1.886-4.085 3.929-4.085 2.278 0 3.693 1.571 3.928 4.085h-7.857zM77.43 0h-4.636l-8.957 9.9V0h-3.693v21.686h3.693v-11l9.9 11h4.714L68.079 10.214 77.507 0h-.078zm6.285 6.286H80.1V18.07h3.536V6.286h.078zm-65.764 0h-3.614V9.82h3.614V6.286zm69.3 11.785h-3.614v3.615h3.614V18.07zm10.607 0h-3.536v3.615h3.615V18.07h-.079zm0-8.25V6.286h-3.536V0h-3.535v6.286H87.17V9.82h3.615v8.25h3.535v-8.25h3.615-.079z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/LiveKit/index.md

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

src/LiveKit/index.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import Avatar from './components/Avatar';
+import Color from './components/Color';
+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;
+  Color: typeof Color;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  colorPrimary: string;
+  title: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+Icons.Color = Color;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+Icons.title = TITLE;
+
+export default Icons;

src/LiveKit/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'LiveKit';
+export const TEXT_MULTIPLE = 0.8;
+export const SPACE_MULTIPLE = 0.3;
+export const COLOR_PRIMARY = '#000';

src/icons.ts

@@ -62,6 +62,7 @@ export { default as Kimi, type CompoundedIcon as KimiProps } from './Kimi';
 export { default as Kling, type CompoundedIcon as KlingProps } from './Kling';
 export { default as LangChain, type CompoundedIcon as LangChainProps } from './LangChain';
 export { default as Langfuse, type CompoundedIcon as LangfuseProps } from './Langfuse';
+export { default as LiveKit, type CompoundedIcon as LiveKitProps } from './LiveKit';
 export { default as LLaVA, type CompoundedIcon as LLaVAProps } from './LLaVA';
 export { default as LmStudio, type CompoundedIcon as LmStudioProps } from './LmStudio';
 export { default as LobeHub, type CompoundedIcon as LobeHubProps } from './LobeHub';

src/toc.ts

@@ -1215,6 +1215,25 @@ const toc: IconToc[] = [
     },
     title: 'Langfuse',
   },
+  {
+    color: '#000',
+    desc: 'https://livekit.io',
+    docsUrl: 'live-kit',
+    fullTitle: 'LiveKit',
+    group: 'application',
+    id: 'LiveKit',
+    param: {
+      hasAvatar: true,
+      hasBrand: false,
+      hasBrandColor: false,
+      hasColor: true,
+      hasCombine: true,
+      hasText: true,
+      hasTextCn: false,
+      hasTextColor: false,
+    },
+    title: 'LiveKit',
+  },
   {
     color: '#4338CA',
     colorGradient: 'linear-gradient(135deg, #6C78EF, #4F14BE)',