✨ feat: Add Google Gemini

lobehub · Jan 31, 2024 · f4a71e0 · f4a71e0
1 parent 6bf49b0
commit f4a71e0
Show file tree

Hide file tree

Showing 63 changed files with 1,105 additions and 116 deletions.
diff --git a/src/Anthropic/components/Avatar.tsx b/src/Anthropic/components/Avatar.tsx
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
+import { COLOR_PRIMARY } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar Icon={Mono} background={background || COLOR_PRIMARY} color={'#191918'} {...rest} />
+  );
+});
+
+export default Avatar;
diff --git a/src/Anthropic/components/Mono.tsx b/src/Anthropic/components/Mono.tsx
@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+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}
+    >
+      <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Anthropic/components/Text.tsx b/src/Anthropic/components/Text.tsx
@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+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 182 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M38.247 15.874L29.553 2.338H24.86v19.337h4.002V8.139l8.694 13.536h4.693V2.338h-4.003v13.536zm7.313-9.807h6.487v15.608h4.14V6.067h6.487v-3.73H45.56v3.73zm33.686 3.978h-9.109V2.338h-4.14v19.337h4.14v-7.9h9.109v7.9h4.14V2.338h-4.14v7.707zm13.39-3.978h5.108c2.043 0 3.12.746 3.12 2.155 0 1.408-1.077 2.154-3.12 2.154h-5.107v-4.31zm12.37 2.155c0-3.647-2.679-5.884-7.068-5.884h-9.443v19.337h4.142v-7.57h4.61l4.142 7.57h4.583l-4.586-8.146c2.302-.885 3.62-2.75 3.62-5.307zm12.686 9.91c-3.257 0-5.244-2.32-5.244-6.104 0-3.84 1.987-6.16 5.244-6.16 3.23 0 5.189 2.32 5.189 6.16 0 3.784-1.96 6.105-5.189 6.105zm0-16.132c-5.575 0-9.522 4.144-9.522 10.028 0 5.828 3.947 9.972 9.522 9.972 5.547 0 9.466-4.144 9.466-9.972C127.158 6.144 123.24 2 117.692 2zm22.59 8.929h-5.109V6.067h5.11c2.043 0 3.12.829 3.12 2.43 0 1.603-1.077 2.432-3.12 2.432zm.194-8.591h-9.445v19.337h4.142v-7.017h5.303c4.39 0 7.07-2.32 7.07-6.16 0-3.84-2.68-6.16-7.07-6.16zm35.108 12.839c-.718 1.878-2.153 2.956-4.113 2.956-3.257 0-5.244-2.32-5.244-6.105 0-3.84 1.987-6.16 5.244-6.16 1.96 0 3.395 1.077 4.113 2.955h4.388C178.896 4.68 175.667 2 171.472 2c-5.576 0-9.523 4.144-9.523 10.028 0 5.828 3.947 9.972 9.522 9.972 4.223 0 7.453-2.707 8.529-6.823h-4.416zm-26.39-12.84l7.705 19.338h4.225L153.42 2.338h-4.225zM9.277 14.024l2.636-6.796 2.637 6.796H9.276zm.428-11.685L2 21.675h4.307l1.576-4.06h8.06l1.575 4.06h4.307L14.121 2.338H9.704z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Anthropic/index.md b/src/Anthropic/index.md
@@ -0,0 +1,57 @@
+---
+nav: Components
+group: Icons
+title: Anthropic (Claude)
+atomId: Anthropic
+description: https://anthropic.com
+---
+
+## Icons
+
+```tsx
+import { Anthropic } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => <Anthropic size={64} />;
+```
+
+## Text
+
+```tsx
+import { Anthropic } from '@lobehub/icons';
+
+export default () => <Anthropic.Text size={48} />;
+```
+
+## Avatars
+
+```tsx
+import { Anthropic } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Anthropic.Avatar size={64} />
+    <Anthropic.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Anthropic } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Anthropic.colorPrimary} />
+  </Flexbox>
+);
+```
+
+## APIs
+
+<API></API>
diff --git a/src/Anthropic/index.ts b/src/Anthropic/index.ts
@@ -0,0 +1,19 @@
+import Avatar from './components/Avatar';
+import Mono from './components/Mono';
+import Text from './components/Text';
+import { COLOR_PRIMARY } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Mono: typeof Mono;
+  Text: typeof Text;
+  colorPrimary: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+
+Icons.Text = Text;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+
+export default Icons;
diff --git a/src/Anthropic/style.ts b/src/Anthropic/style.ts
@@ -0,0 +1,3 @@
+export const TEXT_MULTIPLE = 0.75;
+export const SPACE_MULTIPLE = 0.1;
+export const COLOR_PRIMARY = '#D29D75';
diff --git a/src/ChatGLM/components/Avatar.tsx b/src/ChatGLM/components/Avatar.tsx
@@ -2,15 +2,20 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
 
-import { COLOR_PRIMARY } from '../style';
+import { COLOR_GRADIENT } from '../style';
 import Mono from './Mono';
 
-const Avatar = memo<IconAvatarProps>(({ size = 24, style, background, ...rest }) => {
-  const bg = background || COLOR_PRIMARY;
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ size = 24, background, iconStyle, ...rest }) => {
   return (
-    <IconAvatar background={bg} size={size} style={{ color: '#fff', ...style }} {...rest}>
-      <Mono size={size * 0.75} style={{ marginLeft: size * 0.1 }} />
-    </IconAvatar>
+    <IconAvatar
+      Icon={Mono}
+      background={background || COLOR_GRADIENT}
+      iconStyle={{ marginLeft: size * 0.1, ...iconStyle }}
+      size={size}
+      {...rest}
+    ></IconAvatar>
   );
 });
 

diff --git a/src/ChatGLM/components/Color.tsx b/src/ChatGLM/components/Color.tsx
@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
 
+import { useFillId } from '@/hooks/useFillId';
 import type { IconType } from '@/types';
 
 const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  const { id, fill } = useFillId('chatglm');
   return (
     <svg
       height={size}
@@ -14,14 +16,14 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
       {...rest}
     >
       <defs>
-        <linearGradient id="a" x1="-18.756%" x2="70.894%" y1="49.371%" y2="90.944%">
+        <linearGradient id={id} x1="-18.756%" x2="70.894%" y1="49.371%" y2="90.944%">
           <stop offset="0%" stopColor="#504AF4"></stop>
           <stop offset="100%" stopColor="#3485FF"></stop>
         </linearGradient>
       </defs>
       <path
         d="M9.917 2c4.906 0 10.178 3.947 8.93 10.58-.014.07-.037.14-.057.21l-.003-.277c-.083-3-1.534-8.934-8.87-8.934-3.393 0-8.137 3.054-7.93 8.158-.04 4.778 3.555 8.4 7.95 8.332l.073-.001c1.2-.033 2.763-.429 3.1-1.657.063-.031.26.534.268.598.048.256.112.369.192.34.981-.348 2.286-1.222 1.952-2.38-.176-.61-1.775-.147-1.921-.347.418-.979 2.234-.926 3.153-.716.443.102.657.38 1.012.442.29.052.981-.2.96.242-1.5 3.042-4.893 5.41-8.808 5.41C3.654 22 0 16.574 0 11.737 0 5.947 4.959 2 9.917 2zM9.9 5.3c.484 0 1.125.225 1.38.585 3.669.145 4.313 2.686 4.694 5.444.255 1.838.315 2.3.182 1.387l.083.59c.068.448.554.737.982.516.144-.075.254-.231.328-.47a.2.2 0 01.258-.13l.625.22a.2.2 0 01.124.238 2.172 2.172 0 01-.51.92c-.878.917-2.757.664-3.08-.62-.14-.554-.055-.626-.345-1.242-.292-.621-1.238-.709-1.69-.295-.345.315-.407.805-.406 1.282L12.6 15.9a.9.9 0 01-.9.9h-1.4a.9.9 0 01-.9-.9v-.65a1.15 1.15 0 10-2.3 0v.65a.9.9 0 01-.9.9H4.8a.9.9 0 01-.9-.9l.035-3.239c.012-1.884.356-3.658 2.47-4.134.2-.045.252.13.29.342.025.154.043.252.053.294.701 3.058 1.75 4.299 3.144 3.722l.66-.331.254-.13c.158-.082.25-.131.276-.15.012-.01-.165-.206-.407-.464l-1.012-1.067a8.925 8.925 0 01-.199-.216c-.047-.034-.116.068-.208.306-.074.157-.251.252-.272.326-.013.058.108.298.362.72.164.288.22.508-.31.343-1.04-.8-1.518-2.273-1.684-3.725-.004-.035-.162-1.913-.162-1.913a1.2 1.2 0 011.113-1.281L9.9 5.3zm12.994 8.68c.037.697-.403.704-1.213.591l-1.783-.276c-.265-.053-.385-.099-.313-.147.47-.315 3.268-.93 3.31-.168zm-.915-.083l-.926.042c-.85.077-1.452.24.338.336l.103.003c.815.012 1.264-.359.485-.381zm1.667-3.601h.01c.79.398.067 1.03-.65 1.393-.14.07-.491.176-1.052.315-.241.04-.457.092-.333.16l.01.005c1.952.958-3.123 1.534-2.495 1.285l.38-.148c.68-.266 1.614-.682 1.666-1.337.038-.48 1.253-.442 1.493-.968.048-.106 0-.236-.144-.389-.05-.047-.094-.094-.107-.148-.073-.305.7-.431 1.222-.168zm-2.568-.474c-.135 1.198-2.479 4.192-1.949 2.863l.017-.042c.298-.717.376-2.221 1.337-3.221.25-.26.636.035.595.4zm-7.976-.253c.02-.694 1.002-.968 1.346-.347.01-1.274-1.941-.768-1.346.347z"
-        fill="url(#a)"
+        fill={fill}
         fillRule="evenodd"
       ></path>
     </svg>

diff --git a/src/ChatGLM/components/Combine.tsx b/src/ChatGLM/components/Combine.tsx
@@ -1,23 +1,26 @@
 import { memo } from 'react';
-import { Flexbox, type FlexboxProps } from 'react-layout-kit';
+
+import IconCombine, { type IconCombineProps } from '@/IconCombine';
 
 import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style';
 import Color from './Color';
 import Mono from './Mono';
 import Text from './Text';
 
-export interface CombineProps extends FlexboxProps {
-  size?: number;
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
   type?: 'color' | 'mono';
 }
-const Combine = memo<CombineProps>(({ type = 'mono', size = 24, ...rest }) => {
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
   const Icon = type === 'color' ? Color : Mono;
 
   return (
-    <Flexbox align={'center'} flex={'none'} gap={size * SPACE_MULTIPLE} horizontal {...rest}>
-      <Icon size={size} />
-      <Text size={size * TEXT_MULTIPLE} />
-    </Flexbox>
+    <IconCombine
+      Icon={Icon}
+      Text={Text}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
   );
 });
 

diff --git a/src/ChatGLM/index.md b/src/ChatGLM/index.md
@@ -1,7 +1,8 @@
 ---
 nav: Components
 group: Icons
-title: ChatGLM
+title: Zhipu (ChatGLM)
+description: https://github.com/THUDM/ChatGLM-6B
 ---
 
 ## Icons
@@ -48,6 +49,7 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox gap={16} horizontal>
+    <ChatGLM.Avatar size={64} background={ChatGLM.colorPrimary} />
     <ChatGLM.Avatar size={64} />
     <ChatGLM.Avatar size={64} shape={'square'} />
   </Flexbox>
@@ -57,12 +59,19 @@ export default () => (
 ## Colors
 
 ```tsx
-/**
- * inline: true
- */
 import { ChatGLM } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
 
 import ColorPreview from '../components/ColorPreview';
 
-export default () => <ColorPreview color={ChatGLM.colorPrimary} />;
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={ChatGLM.colorPrimary} />
+    <ColorPreview color={ChatGLM.colorGradient} />
+  </Flexbox>
+);
 ```
+
+## APIs
+
+<API></API>
diff --git a/src/ChatGLM/index.ts b/src/ChatGLM/index.ts
@@ -3,22 +3,24 @@ import Color from './components/Color';
 import Combine from './components/Combine';
 import Mono from './components/Mono';
 import Text from './components/Text';
-import { COLOR_PRIMARY } from './style';
+import { COLOR_GRADIENT, COLOR_PRIMARY } from './style';
 
-type CompoundedComponent = typeof Mono & {
+export type CompoundedIcon = typeof Mono & {
   Avatar: typeof Avatar;
   Color: typeof Color;
   Combine: typeof Combine;
   Mono: typeof Mono;
   Text: typeof Text;
+  colorGradient: string;
   colorPrimary: string;
 };
 
-const Icons = Mono as CompoundedComponent;
+const Icons = Mono as CompoundedIcon;
 Icons.Color = Color;
 Icons.Text = Text;
 Icons.Combine = Combine;
 Icons.Avatar = Avatar;
 Icons.colorPrimary = COLOR_PRIMARY;
+Icons.colorGradient = COLOR_GRADIENT;
 
 export default Icons;
diff --git a/src/ChatGLM/style.ts b/src/ChatGLM/style.ts
@@ -1,3 +1,4 @@
 export const TEXT_MULTIPLE = 0.75;
 export const SPACE_MULTIPLE = 0.1;
 export const COLOR_PRIMARY = '#4268FA';
+export const COLOR_GRADIENT = 'linear-gradient(-45deg, #3485FF,  #504AF4)';
diff --git a/src/Dalle/components/Combine.tsx b/src/Dalle/components/Combine.tsx
@@ -0,0 +1,25 @@
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style';
+import Mono from './Mono';
+import Text from './Text';
+
+export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+
+const Combine = memo<CombineProps>(({ extraStyle, size = 24, ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Mono}
+      Text={Text}
+      extraStyle={{ fontSize: size * 0.85, marginLeft: size * SPACE_MULTIPLE, ...extraStyle }}
+      size={size}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;
diff --git a/src/Dalle/components/Mono.tsx b/src/Dalle/components/Mono.tsx
@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+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}
+    >
+      <path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Dalle/components/Text.tsx b/src/Dalle/components/Text.tsx
@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+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 85 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M8.147 2c1.438 0 2.75.225 3.937.676 1.186.45 2.21 1.099 3.074 1.946a8.625 8.625 0 011.927 3.094c.44 1.198.66 2.527.66 3.987s-.22 2.788-.66 3.986a8.625 8.625 0 01-1.927 3.095 8.778 8.778 0 01-3.074 1.946c-1.187.45-2.499.675-3.937.675H2V2h6.147zm19.898 0l7.469 19.405h-2.615l-1.969-5.108H22.25l-1.942 5.108H17.72L25.187 2h2.858zM8.12 4.243H4.534v14.92h3.613c2.175 0 3.896-.672 5.164-2.014 1.267-1.343 1.9-3.158 1.9-5.446 0-2.289-.633-4.104-1.9-5.446-1.268-1.343-2.998-2.014-5.19-2.014zm18.442.676l-3.45 9.108h6.956l-3.506-9.108zm23.215 16.486H37.536V2h2.588v17.135h9.653v2.27zM54.414 2v17.135h9.653v2.27H51.826V2h2.588zm12.619 9.946v3.19h-3.074v-3.19h3.074zm2.965 9.46V2h12.646v2.27H72.56v5.973h8.547v2.27H72.56v6.622h10.084v2.27H69.998z"></path>
+    </svg>
+  );
+});
+
+export default Icon;