✨ feat: Add more ai brand

lobehub · Feb 2, 2024 · 8e63d1b · 8e63d1b
1 parent a57cb02
commit 8e63d1b
Show file tree

Hide file tree

Showing 68 changed files with 1,920 additions and 51 deletions.
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -1,61 +1,68 @@
-import * as Icons from '@lobehub/icons';
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Features, FeaturesProps } from '@lobehub/ui';
+import { Segmented } from 'antd';
 import { createStyles } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
+import { Expand, GitPullRequest, Trees } from 'lucide-react';
+import { useState } from 'react';
+import { Center } from 'react-layout-kit';
 
-const data = Object.values(Icons).filter((icon: any) => icon?.colorPrimary);
+import Dashboard from '@/components/Dashboard';
+import DashboardText from '@/components/Dashboard/Text';
+
+const items: FeaturesProps['items'] = [
+  {
+    description:
+      'Icons are designed to be lightweight, utilizing highly optimized scalable vector graphics (SVG) for the best performance and quality.',
+    icon: Expand,
+    title: 'Lightweight & Scalable',
+  },
+  {
+    description:
+      'The collection is tree-shakable, ensuring that you only import the icons that you use, which helps in reducing the overall bundle size of your project.',
+    icon: Trees,
+    title: 'Tree Shakable',
+  },
+  {
+    description:
+      'Lobe Icons boasts an active community of designers and developers. Engage with us on platforms like GitHub and Discord to contribute or get support.',
+    icon: GitPullRequest,
+    title: 'Active Community',
+  },
+];
 
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
+    margin-top: -4%;
+  `,
+  dashboard: css`
     overflow: hidden;
-
     max-width: 960px;
-    margin-top: -4%;
-
     border: 1px solid ${token.colorBorder};
     border-radius: ${token.borderRadiusLG}px;
   `,
-  item: css`
-    width: 96px;
-    height: 96px;
-    background: ${token.colorBgContainer};
+  segmented: css`
+    border: 1px solid ${token.colorBorder};
   `,
 }));
 
 export default () => {
+  const [avtive, setActive] = useState('icons');
   const { styles } = useStyles();
-  const store = useCreateStore();
-
-  const { size, color, monochrome } = useControls(
-    {
-      color: {
-        color: true,
-        value: '#fff',
-      },
-      monochrome: true,
-      size: {
-        max: 96,
-        min: 16,
-        step: 1,
-        value: 48,
-      },
-    },
-    { store },
-  );
 
   return (
-    <StoryBook className={styles.container} levaStore={store}>
-      <Flexbox align={'center'} gap={4} horizontal justify={'center'} style={{ flexWrap: 'wrap' }}>
-        {data.map((Icon: any, index) => {
-          const IconRender = !monochrome && Icon.Color ? Icon.Color : Icon;
-
-          return (
-            <Flexbox align={'center'} className={styles.item} justify={'center'} key={index}>
-              <IconRender color={color === '#fff' ? undefined : color} size={size} />
-            </Flexbox>
-          );
-        })}
-      </Flexbox>
-    </StoryBook>
+    <Center className={styles.container} gap={16}>
+      <Segmented
+        className={styles.segmented}
+        onChange={(v) => setActive(v as any)}
+        options={[
+          { label: 'Brand Icons', value: 'icons' },
+          { label: 'Brand Texts', value: 'texts' },
+        ]}
+        size={'large'}
+        value={avtive}
+      />
+      {avtive === 'icons' && <Dashboard className={styles.dashboard} />}
+      {avtive === 'texts' && <DashboardText className={styles.dashboard} />}
+      <Features items={items} />
+    </Center>
   );
 };
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "@types/react": "18.2.40",
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "latest",
+    "antd": "^5.13.3",
     "antd-style": "^3",
     "babel-plugin-antd-style": "latest",
     "commitlint": "^18",
@@ -95,6 +96,7 @@
     "husky": "^8",
     "jsdom": "^23",
     "lint-staged": "^15",
+    "lucide-react": "latest",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",

diff --git a/src/Bing/components/Avatar.tsx b/src/Bing/components/Avatar.tsx
@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
+import { COLOR_GRADIENT } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, iconStyle, size, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Mono}
+      background={background || COLOR_GRADIENT}
+      iconStyle={{ marginLeft: size * 0.08, ...iconStyle }}
+      size={size}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;
diff --git a/src/Bing/components/Color.tsx b/src/Bing/components/Color.tsx
@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+
+import { useFillIds } from '@/hooks/useFillId';
+import type { IconType } from '@/types';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  const [a, b, c] = useFillIds('bing', 3);
+
+  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}
+    >
+      <defs>
+        <radialGradient
+          cx="93.717%"
+          cy="77.818%"
+          fx="93.717%"
+          fy="77.818%"
+          gradientTransform="scale(-1 -.7146) rotate(49.288 2.035 -2.198)"
+          id={a.id}
+          r="143.691%"
+        >
+          <stop offset="0%" stopColor="#00CACC"></stop>
+          <stop offset="100%" stopColor="#048FCE"></stop>
+        </radialGradient>
+        <radialGradient
+          cx="13.893%"
+          cy="71.448%"
+          fx="13.893%"
+          fy="71.448%"
+          gradientTransform="scale(.6042 1) rotate(-23.34 .184 .494)"
+          id={b.id}
+          r="149.21%"
+        >
+          <stop offset="0%" stopColor="#00BBEC"></stop>
+          <stop offset="100%" stopColor="#2756A9"></stop>
+        </radialGradient>
+        <linearGradient id={c.id} x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#00BBEC"></stop>
+          <stop offset="100%" stopColor="#2756A9"></stop>
+        </linearGradient>
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M11.97 7.569a.92.92 0 00-.805.863c-.013.195-.01.209.43 1.347 1 2.59 1.242 3.214 1.283 3.302.099.213.237.413.41.592.134.138.222.212.37.311.26.176.39.224 1.405.527.989.295 1.529.49 1.994.723.603.302 1.024.644 1.29 1.051.191.292.36.815.434 1.342.029.206.029.661 0 .847a2.491 2.491 0 01-.376 1.026c-.1.151-.065.126.081-.058.415-.52.838-1.408 1.054-2.213a6.728 6.728 0 00.102-3.012 6.626 6.626 0 00-3.291-4.53 104.157 104.157 0 00-1.322-.698l-.254-.133a737.941 737.941 0 01-1.575-.827c-.548-.29-.78-.406-.846-.426a1.376 1.376 0 00-.29-.045l-.093.01z"
+          fill={a.fill}
+        ></path>
+        <path
+          d="M13.164 17.24a4.385 4.385 0 00-.202.125 511.45 511.45 0 00-1.795 1.115 163.087 163.087 0 01-.989.614l-.463.288a99.198 99.198 0 01-1.502.941c-.326.2-.704.334-1.09.387-.18.024-.52.024-.7 0a2.807 2.807 0 01-1.318-.538 3.665 3.665 0 01-.543-.545 2.837 2.837 0 01-.506-1.141 2.161 2.161 0 00-.041-.182c-.008-.008.006.138.032.33.027.199.085.487.147.733.482 1.907 1.85 3.457 3.705 4.195a6.31 6.31 0 001.658.412c.22.025.844.035 1.074.017 1.054-.08 1.972-.393 2.913-.992a325.28 325.28 0 01.937-.596l.384-.244.684-.435.234-.149.009-.005.025-.017.013-.007.172-.11.597-.38c.76-.481.987-.65 1.34-.998.148-.146.37-.394.381-.425.002-.007.042-.068.088-.136a2.49 2.49 0 00.373-1.023 4.181 4.181 0 000-.847 4.336 4.336 0 00-.318-1.137c-.224-.472-.7-.9-1.383-1.245a2.972 2.972 0 00-.406-.181c-.01 0-.646.392-1.413.87a7089.171 7089.171 0 00-1.658 1.031l-.439.274z"
+          fill={b.fill}
+          fillRule="nonzero"
+        ></path>
+        <path
+          d="M4.003 14.946l.004 3.33.042.193c.134.604.366 1.04.77 1.445a2.701 2.701 0 001.955.814c.536 0 1-.135 1.479-.43l.703-.435.556-.346V8.003c0-2.306-.004-3.675-.012-3.782a2.734 2.734 0 00-.797-1.765c-.145-.144-.268-.24-.637-.496A1780.102 1780.102 0 015.762.362C5.406.115 5.38.098 5.271.059a.943.943 0 00-1.254.696C4.003.818 4 1.659 4 6.223v5.394H4l.003 3.329z"
+          fill={c.fill}
+          fillRule="nonzero"
+        ></path>
+      </g>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Bing/components/Combine.tsx b/src/Bing/components/Combine.tsx
@@ -0,0 +1,27 @@
+import { memo } from 'react';
+
+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 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}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;
diff --git a/src/Bing/components/Mono.tsx b/src/Bing/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="M4.842.005a.966.966 0 01.604.142l2.62 1.813c.369.256.492.352.637.496.471.47.752 1.09.797 1.765l.008.847.003 1.441.004 13.002.144-.094 7.015-4.353.015.003.029.01c-.398-.17-.893-.339-1.655-.566l-.484-.146c-.584-.18-.71-.238-.921-.38a2.009 2.009 0 01-.37-.312 2.172 2.172 0 01-.41-.592L11.32 9.063c-.166-.444-.166-.49-.156-.63a.92.92 0 01.806-.864l.094-.01c.044-.005.22.023.29.044l.052.021c.06.026.16.075.313.154l3.63 1.908a6.626 6.626 0 013.292 4.531c.194.99.159 2.037-.102 3.012-.216.805-.639 1.694-1.054 2.213l-.08.099-.047.05c-.01.01-.013.01-.01.002l.043-.074-.072.114c-.011.031-.233.28-.38.425l-.17.161c-.22.202-.431.36-.832.62L13.544 23c-.941.6-1.86.912-2.913.992-.23.018-.854.008-1.074-.017a6.31 6.31 0 01-1.658-.412c-1.854-.738-3.223-2.288-3.705-4.195a8.077 8.077 0 01-.121-.57l-.046-.325a1.123 1.123 0 01-.014-.168l-.006-.029L4 11.617 4.01.866a.981.981 0 01.007-.111.943.943 0 01.825-.75z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Bing/components/Text.tsx b/src/Bing/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 44 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M2 18.658V2.763h4.956c1.509 0 2.71.336 3.59 1.01.881.672 1.322 1.547 1.322 2.624 0 .898-.253 1.683-.75 2.356a4.048 4.048 0 01-2.08 1.413v.045c1.079.124 1.927.527 2.565 1.223.65.673.97 1.57.97 2.658 0 1.358-.529 2.468-1.575 3.298-1.047.83-2.379 1.268-3.987 1.268H2zM4.588 4.883v4.52h1.674c.903 0 1.608-.224 2.115-.639.517-.449.77-1.054.77-1.84 0-1.368-.891-2.041-2.676-2.041H4.588zm0 6.64v5.026h2.203c.969 0 1.718-.224 2.235-.673.529-.46.793-1.088.793-1.885 0-1.648-1.112-2.467-3.359-2.467H4.588zm11.146-6.595c-.408 0-.771-.146-1.058-.415-.297-.27-.44-.617-.44-1.044 0-.426.143-.774.44-1.054.298-.28.65-.415 1.068-.415.419 0 .782.135 1.08.415.297.28.44.64.44 1.054 0 .404-.143.74-.44 1.032-.298.28-.661.427-1.09.427zm1.255 13.73h-2.522V7.306H17l-.011 11.352zm12.5 0h-2.522v-6.394c0-2.131-.738-3.186-2.203-3.186-.77 0-1.41.303-1.916.898a3.292 3.292 0 00-.749 2.21v6.472h-2.533V7.306H22.1V9.19h.044a4.007 4.007 0 011.505-1.602 3.909 3.909 0 012.107-.551c1.212 0 2.137.403 2.776 1.211.639.797.958 1.952.958 3.478v6.932zm12.5-.909c0 4.162-2.048 6.249-6.167 6.249a9.049 9.049 0 01-3.8-.74V20.9c1.211.718 2.379 1.066 3.47 1.066 2.643 0 3.975-1.324 3.975-3.982V16.75h-.044a4.125 4.125 0 01-1.579 1.632 4.026 4.026 0 01-2.188.533 4.034 4.034 0 01-1.811-.365 4.107 4.107 0 01-1.47-1.138 6.238 6.238 0 01-1.245-4.072c0-1.93.44-3.455 1.344-4.6.903-1.143 2.114-1.704 3.678-1.704 1.465 0 2.555.617 3.27 1.84h.045V7.305H42l-.01 10.443zm-2.5-4.285v-1.48c0-.797-.264-1.481-.782-2.042a2.534 2.534 0 00-.878-.642 2.491 2.491 0 00-1.06-.21c-.958 0-1.707.37-2.247 1.088a4.937 4.937 0 00-.815 3.017c0 1.122.265 2.008.77 2.681.53.673 1.212.998 2.071.998.882 0 1.587-.325 2.126-.953.55-.65.815-1.458.815-2.468v.011z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Bing/index.md b/src/Bing/index.md
@@ -0,0 +1,74 @@
+---
+nav: Components
+group: Icons
+title: Microsoft (Bing)
+atomId: Bing
+description: https://bing.com
+---
+
+## Icons
+
+```tsx
+import { Bing } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Bing size={64} />
+    <Bing.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Bing } from '@lobehub/icons';
+
+export default () => <Bing.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { Bing } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16}>
+    <Bing.Combine size={64} />
+    <Bing.Combine size={64} type={'color'} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Bing } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Bing.Avatar size={64} background={Bing.colorGradient} />
+    <Bing.Avatar size={64} />
+    <Bing.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Bing } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Bing.colorPrimary} />
+    <ColorPreview color={Bing.colorGradient} />
+  </Flexbox>
+);
+```
diff --git a/src/Bing/index.ts b/src/Bing/index.ts
@@ -0,0 +1,25 @@
+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_GRADIENT, COLOR_PRIMARY } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Color: typeof Color;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  colorGradient: string;
+  colorPrimary: string;
+};
+
+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;