From 8e63d1bfbc3c76c6e27958a41829d37d10c98fc6 Mon Sep 17 00:00:00 2001 From: CanisMinor Date: Fri, 2 Feb 2024 08:50:45 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20more=20ai=20brand?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.tsx | 91 ++++++++++--------- package.json | 2 + src/Bing/components/Avatar.tsx | 22 +++++ src/Bing/components/Color.tsx | 69 ++++++++++++++ src/Bing/components/Combine.tsx | 27 ++++++ src/Bing/components/Mono.tsx | 23 +++++ src/Bing/components/Text.tsx | 22 +++++ src/Bing/index.md | 74 +++++++++++++++ src/Bing/index.ts | 25 ++++++ src/Bing/style.ts | 4 + src/Copilot/components/Avatar.tsx | 14 +++ src/Copilot/components/Color.tsx | 109 +++++++++++++++++++++++ src/Copilot/components/Combine.tsx | 27 ++++++ src/Copilot/components/Mono.tsx | 23 +++++ src/Copilot/components/Text.tsx | 22 +++++ src/Copilot/index.md | 72 +++++++++++++++ src/Copilot/index.ts | 24 +++++ src/Copilot/style.ts | 3 + src/DeepMind/components/Avatar.tsx | 14 +++ src/DeepMind/components/Color.tsx | 25 ++++++ src/DeepMind/components/Combine.tsx | 27 ++++++ src/DeepMind/components/Mono.tsx | 23 +++++ src/DeepMind/components/Text.tsx | 22 +++++ src/DeepMind/index.md | 72 +++++++++++++++ src/DeepMind/index.ts | 24 +++++ src/DeepMind/style.ts | 3 + src/Gemini/index.ts | 1 - src/Github/components/Avatar.tsx | 16 ++++ src/Github/components/Combine.tsx | 23 +++++ src/Github/components/Mono.tsx | 23 +++++ src/Github/components/Text.tsx | 22 +++++ src/Github/index.md | 66 ++++++++++++++ src/Github/index.ts | 20 +++++ src/Github/style.ts | 3 + src/GithubCopilot/components/Avatar.tsx | 16 ++++ src/GithubCopilot/components/Combine.tsx | 23 +++++ src/GithubCopilot/components/Mono.tsx | 23 +++++ src/GithubCopilot/components/Text.tsx | 22 +++++ src/GithubCopilot/index.md | 66 ++++++++++++++ src/GithubCopilot/index.ts | 20 +++++ src/GithubCopilot/style.ts | 3 + src/Google/components/Avatar.tsx | 14 +++ src/Google/components/BrandColor.tsx | 42 +++++++++ src/Google/components/BrandMono.tsx | 22 +++++ src/Google/components/Color.tsx | 38 ++++++++ src/Google/components/Mono.tsx | 23 +++++ src/Google/index.md | 64 +++++++++++++ src/Google/index.ts | 23 +++++ src/Google/style.ts | 1 + src/Moonshot/components/Avatar.tsx | 16 ++++ src/Moonshot/components/Combine.tsx | 23 +++++ src/Moonshot/components/Mono.tsx | 23 +++++ src/Moonshot/components/Text.tsx | 22 +++++ src/Moonshot/index.md | 66 ++++++++++++++ src/Moonshot/index.ts | 20 +++++ src/Moonshot/style.ts | 3 + src/Pollinations/components/Avatar.tsx | 16 ++++ src/Pollinations/components/Combine.tsx | 23 +++++ src/Pollinations/components/Mono.tsx | 23 +++++ src/Pollinations/components/Text.tsx | 22 +++++ src/Pollinations/index.md | 66 ++++++++++++++ src/Pollinations/index.ts | 20 +++++ src/Pollinations/style.ts | 3 + src/components/Dashboard/Text.tsx | 57 ++++++++++++ src/components/Dashboard/index.tsx | 57 ++++++++++++ src/components/DownloadButton/index.tsx | 29 ++++++ src/components/IconPreview/index.tsx | 34 +++++-- src/index.ts | 11 +++ 68 files changed, 1920 insertions(+), 51 deletions(-) create mode 100644 src/Bing/components/Avatar.tsx create mode 100644 src/Bing/components/Color.tsx create mode 100644 src/Bing/components/Combine.tsx create mode 100644 src/Bing/components/Mono.tsx create mode 100644 src/Bing/components/Text.tsx create mode 100644 src/Bing/index.md create mode 100644 src/Bing/index.ts create mode 100644 src/Bing/style.ts create mode 100644 src/Copilot/components/Avatar.tsx create mode 100644 src/Copilot/components/Color.tsx create mode 100644 src/Copilot/components/Combine.tsx create mode 100644 src/Copilot/components/Mono.tsx create mode 100644 src/Copilot/components/Text.tsx create mode 100644 src/Copilot/index.md create mode 100644 src/Copilot/index.ts create mode 100644 src/Copilot/style.ts create mode 100644 src/DeepMind/components/Avatar.tsx create mode 100644 src/DeepMind/components/Color.tsx create mode 100644 src/DeepMind/components/Combine.tsx create mode 100644 src/DeepMind/components/Mono.tsx create mode 100644 src/DeepMind/components/Text.tsx create mode 100644 src/DeepMind/index.md create mode 100644 src/DeepMind/index.ts create mode 100644 src/DeepMind/style.ts create mode 100644 src/Github/components/Avatar.tsx create mode 100644 src/Github/components/Combine.tsx create mode 100644 src/Github/components/Mono.tsx create mode 100644 src/Github/components/Text.tsx create mode 100644 src/Github/index.md create mode 100644 src/Github/index.ts create mode 100644 src/Github/style.ts create mode 100644 src/GithubCopilot/components/Avatar.tsx create mode 100644 src/GithubCopilot/components/Combine.tsx create mode 100644 src/GithubCopilot/components/Mono.tsx create mode 100644 src/GithubCopilot/components/Text.tsx create mode 100644 src/GithubCopilot/index.md create mode 100644 src/GithubCopilot/index.ts create mode 100644 src/GithubCopilot/style.ts create mode 100644 src/Google/components/Avatar.tsx create mode 100644 src/Google/components/BrandColor.tsx create mode 100644 src/Google/components/BrandMono.tsx create mode 100644 src/Google/components/Color.tsx create mode 100644 src/Google/components/Mono.tsx create mode 100644 src/Google/index.md create mode 100644 src/Google/index.ts create mode 100644 src/Google/style.ts create mode 100644 src/Moonshot/components/Avatar.tsx create mode 100644 src/Moonshot/components/Combine.tsx create mode 100644 src/Moonshot/components/Mono.tsx create mode 100644 src/Moonshot/components/Text.tsx create mode 100644 src/Moonshot/index.md create mode 100644 src/Moonshot/index.ts create mode 100644 src/Moonshot/style.ts create mode 100644 src/Pollinations/components/Avatar.tsx create mode 100644 src/Pollinations/components/Combine.tsx create mode 100644 src/Pollinations/components/Mono.tsx create mode 100644 src/Pollinations/components/Text.tsx create mode 100644 src/Pollinations/index.md create mode 100644 src/Pollinations/index.ts create mode 100644 src/Pollinations/style.ts create mode 100644 src/components/Dashboard/Text.tsx create mode 100644 src/components/Dashboard/index.tsx create mode 100644 src/components/DownloadButton/index.tsx diff --git a/docs/index.tsx b/docs/index.tsx index 67247d48..8ce144d8 100644 --- 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 ( - - - {data.map((Icon: any, index) => { - const IconRender = !monochrome && Icon.Color ? Icon.Color : Icon; - - return ( - - - - ); - })} - - +
+ setActive(v as any)} + options={[ + { label: 'Brand Icons', value: 'icons' }, + { label: 'Brand Texts', value: 'texts' }, + ]} + size={'large'} + value={avtive} + /> + {avtive === 'icons' && } + {avtive === 'texts' && } + +
); }; diff --git a/package.json b/package.json index 189960cd..38cdddc9 100644 --- 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 new file mode 100644 index 00000000..88db4463 --- /dev/null +++ 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; + +const Avatar = memo(({ background, iconStyle, size, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Bing/components/Color.tsx b/src/Bing/components/Color.tsx new file mode 100644 index 00000000..75590f4a --- /dev/null +++ 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 ( + + + + + + + + + + + + + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Bing/components/Combine.tsx b/src/Bing/components/Combine.tsx new file mode 100644 index 00000000..176cdc8d --- /dev/null +++ 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 { + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + ); +}); + +export default Combine; diff --git a/src/Bing/components/Mono.tsx b/src/Bing/components/Mono.tsx new file mode 100644 index 00000000..d93419a1 --- /dev/null +++ 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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Bing/components/Text.tsx b/src/Bing/components/Text.tsx new file mode 100644 index 00000000..f527659a --- /dev/null +++ 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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Bing/index.md b/src/Bing/index.md new file mode 100644 index 00000000..63afb66a --- /dev/null +++ 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 () => ( + + + + +); +``` + +## Text + +```tsx +import { Bing } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Bing } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Bing } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + + +); +``` + +## Colors + +```tsx +import { Bing } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + + +); +``` diff --git a/src/Bing/index.ts b/src/Bing/index.ts new file mode 100644 index 00000000..68d144c5 --- /dev/null +++ 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; diff --git a/src/Bing/style.ts b/src/Bing/style.ts new file mode 100644 index 00000000..c73a8dd8 --- /dev/null +++ b/src/Bing/style.ts @@ -0,0 +1,4 @@ +export const TEXT_MULTIPLE = 0.8; +export const SPACE_MULTIPLE = 0.1; +export const COLOR_PRIMARY = '#174ae4'; +export const COLOR_GRADIENT = 'linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)'; diff --git a/src/Copilot/components/Avatar.tsx b/src/Copilot/components/Avatar.tsx new file mode 100644 index 00000000..899f1aa6 --- /dev/null +++ b/src/Copilot/components/Avatar.tsx @@ -0,0 +1,14 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Color from './Color'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ; +}); + +export default Avatar; diff --git a/src/Copilot/components/Color.tsx b/src/Copilot/components/Color.tsx new file mode 100644 index 00000000..d1468e35 --- /dev/null +++ b/src/Copilot/components/Color.tsx @@ -0,0 +1,109 @@ +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, d, e, f] = useFillIds('copilot', 6); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Copilot/components/Combine.tsx b/src/Copilot/components/Combine.tsx new file mode 100644 index 00000000..176cdc8d --- /dev/null +++ b/src/Copilot/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 { + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + ); +}); + +export default Combine; diff --git a/src/Copilot/components/Mono.tsx b/src/Copilot/components/Mono.tsx new file mode 100644 index 00000000..d7cc46c1 --- /dev/null +++ b/src/Copilot/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Copilot/components/Text.tsx b/src/Copilot/components/Text.tsx new file mode 100644 index 00000000..e9bcfd2c --- /dev/null +++ b/src/Copilot/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Copilot/index.md b/src/Copilot/index.md new file mode 100644 index 00000000..d6f0f576 --- /dev/null +++ b/src/Copilot/index.md @@ -0,0 +1,72 @@ +--- +nav: Components +group: Icons +title: Microsoft (Copilot) +atomId: Copilot +description: https://copilot.microsoft.com +--- + +## Icons + +```tsx +import { Copilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { Copilot } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Copilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Copilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Copilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/Copilot/index.ts b/src/Copilot/index.ts new file mode 100644 index 00000000..21fa8c71 --- /dev/null +++ b/src/Copilot/index.ts @@ -0,0 +1,24 @@ +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 } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/Copilot/style.ts b/src/Copilot/style.ts new file mode 100644 index 00000000..b5673f62 --- /dev/null +++ b/src/Copilot/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.8; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#fff'; diff --git a/src/DeepMind/components/Avatar.tsx b/src/DeepMind/components/Avatar.tsx new file mode 100644 index 00000000..e7c3a9d6 --- /dev/null +++ b/src/DeepMind/components/Avatar.tsx @@ -0,0 +1,14 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Mono from './Mono'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ; +}); + +export default Avatar; diff --git a/src/DeepMind/components/Color.tsx b/src/DeepMind/components/Color.tsx new file mode 100644 index 00000000..0df4cf01 --- /dev/null +++ b/src/DeepMind/components/Color.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/DeepMind/components/Combine.tsx b/src/DeepMind/components/Combine.tsx new file mode 100644 index 00000000..176cdc8d --- /dev/null +++ b/src/DeepMind/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 { + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + ); +}); + +export default Combine; diff --git a/src/DeepMind/components/Mono.tsx b/src/DeepMind/components/Mono.tsx new file mode 100644 index 00000000..72bf2797 --- /dev/null +++ b/src/DeepMind/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/DeepMind/components/Text.tsx b/src/DeepMind/components/Text.tsx new file mode 100644 index 00000000..93fbe13c --- /dev/null +++ b/src/DeepMind/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/DeepMind/index.md b/src/DeepMind/index.md new file mode 100644 index 00000000..fef92ce7 --- /dev/null +++ b/src/DeepMind/index.md @@ -0,0 +1,72 @@ +--- +nav: Components +group: Icons +title: Google (DeepMind) +atomId: DeepMind +description: https://deepmind.google +--- + +## Icons + +```tsx +import { DeepMind } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { DeepMind } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { DeepMind } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { DeepMind } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { DeepMind } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/DeepMind/index.ts b/src/DeepMind/index.ts new file mode 100644 index 00000000..21fa8c71 --- /dev/null +++ b/src/DeepMind/index.ts @@ -0,0 +1,24 @@ +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 } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/DeepMind/style.ts b/src/DeepMind/style.ts new file mode 100644 index 00000000..2610f605 --- /dev/null +++ b/src/DeepMind/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.8; +export const SPACE_MULTIPLE = 0.3; +export const COLOR_PRIMARY = '#4285F4'; diff --git a/src/Gemini/index.ts b/src/Gemini/index.ts index 3acc3793..7cb176b2 100644 --- a/src/Gemini/index.ts +++ b/src/Gemini/index.ts @@ -13,7 +13,6 @@ export type CompoundedIcon = typeof Mono & { BrandColor: typeof BrandColor; Color: typeof Color; Combine: typeof Combine; - Text: typeof Text; colorGradient: string; colorPrimary: string; diff --git a/src/Github/components/Avatar.tsx b/src/Github/components/Avatar.tsx new file mode 100644 index 00000000..6cfeaa16 --- /dev/null +++ b/src/Github/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; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Github/components/Combine.tsx b/src/Github/components/Combine.tsx new file mode 100644 index 00000000..3bef4f41 --- /dev/null +++ b/src/Github/components/Combine.tsx @@ -0,0 +1,23 @@ +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; + +const Combine = memo(({ ...rest }) => { + return ( + + ); +}); + +export default Combine; diff --git a/src/Github/components/Mono.tsx b/src/Github/components/Mono.tsx new file mode 100644 index 00000000..f82dfffd --- /dev/null +++ b/src/Github/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Github/components/Text.tsx b/src/Github/components/Text.tsx new file mode 100644 index 00000000..3e4f4b82 --- /dev/null +++ b/src/Github/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Github/index.md b/src/Github/index.md new file mode 100644 index 00000000..d02858b8 --- /dev/null +++ b/src/Github/index.md @@ -0,0 +1,66 @@ +--- +nav: Components +group: Icons +title: Github +atomId: Github +description: https://github.com +--- + +## Icons + +```tsx +import { Github } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ; +``` + +## Text + +```tsx +import { Github } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Github } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + +); +``` + +## Avatars + +```tsx +import { Github } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Github } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/Github/index.ts b/src/Github/index.ts new file mode 100644 index 00000000..a50b8e26 --- /dev/null +++ b/src/Github/index.ts @@ -0,0 +1,20 @@ +import Avatar from './components/Avatar'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +export default Icons; diff --git a/src/Github/style.ts b/src/Github/style.ts new file mode 100644 index 00000000..1bf16702 --- /dev/null +++ b/src/Github/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.8; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#000'; diff --git a/src/GithubCopilot/components/Avatar.tsx b/src/GithubCopilot/components/Avatar.tsx new file mode 100644 index 00000000..29ee6850 --- /dev/null +++ b/src/GithubCopilot/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; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/GithubCopilot/components/Combine.tsx b/src/GithubCopilot/components/Combine.tsx new file mode 100644 index 00000000..3bef4f41 --- /dev/null +++ b/src/GithubCopilot/components/Combine.tsx @@ -0,0 +1,23 @@ +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; + +const Combine = memo(({ ...rest }) => { + return ( + + ); +}); + +export default Combine; diff --git a/src/GithubCopilot/components/Mono.tsx b/src/GithubCopilot/components/Mono.tsx new file mode 100644 index 00000000..4263c009 --- /dev/null +++ b/src/GithubCopilot/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/GithubCopilot/components/Text.tsx b/src/GithubCopilot/components/Text.tsx new file mode 100644 index 00000000..f3bb9ff6 --- /dev/null +++ b/src/GithubCopilot/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/GithubCopilot/index.md b/src/GithubCopilot/index.md new file mode 100644 index 00000000..68a15a33 --- /dev/null +++ b/src/GithubCopilot/index.md @@ -0,0 +1,66 @@ +--- +nav: Components +group: Icons +title: Github (Copilot) +atomId: GithubCopilot +description: https://github.com/features/copilot +--- + +## Icons + +```tsx +import { GithubCopilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ; +``` + +## Text + +```tsx +import { GithubCopilot } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { GithubCopilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + +); +``` + +## Avatars + +```tsx +import { GithubCopilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { GithubCopilot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/GithubCopilot/index.ts b/src/GithubCopilot/index.ts new file mode 100644 index 00000000..a50b8e26 --- /dev/null +++ b/src/GithubCopilot/index.ts @@ -0,0 +1,20 @@ +import Avatar from './components/Avatar'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +export default Icons; diff --git a/src/GithubCopilot/style.ts b/src/GithubCopilot/style.ts new file mode 100644 index 00000000..0c18c1e0 --- /dev/null +++ b/src/GithubCopilot/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.3; +export const COLOR_PRIMARY = '#000'; diff --git a/src/Google/components/Avatar.tsx b/src/Google/components/Avatar.tsx new file mode 100644 index 00000000..899f1aa6 --- /dev/null +++ b/src/Google/components/Avatar.tsx @@ -0,0 +1,14 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Color from './Color'; + +export type AvatarProps = Omit; + +const Avatar = memo(({ background, ...rest }) => { + return ; +}); + +export default Avatar; diff --git a/src/Google/components/BrandColor.tsx b/src/Google/components/BrandColor.tsx new file mode 100644 index 00000000..dffedc3d --- /dev/null +++ b/src/Google/components/BrandColor.tsx @@ -0,0 +1,42 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Google/components/BrandMono.tsx b/src/Google/components/BrandMono.tsx new file mode 100644 index 00000000..10b8ceb8 --- /dev/null +++ b/src/Google/components/BrandMono.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Google/components/Color.tsx b/src/Google/components/Color.tsx new file mode 100644 index 00000000..914efcfa --- /dev/null +++ b/src/Google/components/Color.tsx @@ -0,0 +1,38 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Google/components/Mono.tsx b/src/Google/components/Mono.tsx new file mode 100644 index 00000000..e79fafd1 --- /dev/null +++ b/src/Google/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Google/index.md b/src/Google/index.md new file mode 100644 index 00000000..ecadbe81 --- /dev/null +++ b/src/Google/index.md @@ -0,0 +1,64 @@ +--- +nav: Components +group: Icons +title: Google +atomId: Google +description: https://google.com +--- + +## Icons + +```tsx +import { Google } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Brands + +```tsx +import { Google } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Google } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Google } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/Google/index.ts b/src/Google/index.ts new file mode 100644 index 00000000..9acdbddf --- /dev/null +++ b/src/Google/index.ts @@ -0,0 +1,23 @@ +import Avatar from './components/Avatar'; +import BrandColor from './components/BrandColor'; +import BrandMono from './components/BrandMono'; +import Color from './components/Color'; +import Mono from './components/Mono'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Brand: typeof BrandMono; + BrandColor: typeof BrandColor; + Color: typeof Color; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Color = Color; +Icons.Brand = BrandMono; +Icons.BrandColor = BrandColor; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/Google/style.ts b/src/Google/style.ts new file mode 100644 index 00000000..a55bb87e --- /dev/null +++ b/src/Google/style.ts @@ -0,0 +1 @@ +export const COLOR_PRIMARY = '#fff'; diff --git a/src/Moonshot/components/Avatar.tsx b/src/Moonshot/components/Avatar.tsx new file mode 100644 index 00000000..6cfeaa16 --- /dev/null +++ b/src/Moonshot/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; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Moonshot/components/Combine.tsx b/src/Moonshot/components/Combine.tsx new file mode 100644 index 00000000..3bef4f41 --- /dev/null +++ b/src/Moonshot/components/Combine.tsx @@ -0,0 +1,23 @@ +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; + +const Combine = memo(({ ...rest }) => { + return ( + + ); +}); + +export default Combine; diff --git a/src/Moonshot/components/Mono.tsx b/src/Moonshot/components/Mono.tsx new file mode 100644 index 00000000..7b1f8704 --- /dev/null +++ b/src/Moonshot/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Moonshot/components/Text.tsx b/src/Moonshot/components/Text.tsx new file mode 100644 index 00000000..87f87b04 --- /dev/null +++ b/src/Moonshot/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Moonshot/index.md b/src/Moonshot/index.md new file mode 100644 index 00000000..bbd83c1c --- /dev/null +++ b/src/Moonshot/index.md @@ -0,0 +1,66 @@ +--- +nav: Components +group: Icons +title: Moonshot (ζœˆδΉ‹ζš—ι’) +atomId: Moonshot +description: https://moonshot.cn +--- + +## Icons + +```tsx +import { Moonshot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ; +``` + +## Text + +```tsx +import { Moonshot } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Moonshot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + +); +``` + +## Avatars + +```tsx +import { Moonshot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Moonshot } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/Moonshot/index.ts b/src/Moonshot/index.ts new file mode 100644 index 00000000..a50b8e26 --- /dev/null +++ b/src/Moonshot/index.ts @@ -0,0 +1,20 @@ +import Avatar from './components/Avatar'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +export default Icons; diff --git a/src/Moonshot/style.ts b/src/Moonshot/style.ts new file mode 100644 index 00000000..5b3ed6d5 --- /dev/null +++ b/src/Moonshot/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.4; +export const COLOR_PRIMARY = '#16191E'; diff --git a/src/Pollinations/components/Avatar.tsx b/src/Pollinations/components/Avatar.tsx new file mode 100644 index 00000000..6cfeaa16 --- /dev/null +++ b/src/Pollinations/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; + +const Avatar = memo(({ background, ...rest }) => { + return ( + + ); +}); + +export default Avatar; diff --git a/src/Pollinations/components/Combine.tsx b/src/Pollinations/components/Combine.tsx new file mode 100644 index 00000000..3bef4f41 --- /dev/null +++ b/src/Pollinations/components/Combine.tsx @@ -0,0 +1,23 @@ +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; + +const Combine = memo(({ ...rest }) => { + return ( + + ); +}); + +export default Combine; diff --git a/src/Pollinations/components/Mono.tsx b/src/Pollinations/components/Mono.tsx new file mode 100644 index 00000000..8b106c4b --- /dev/null +++ b/src/Pollinations/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Pollinations/components/Text.tsx b/src/Pollinations/components/Text.tsx new file mode 100644 index 00000000..7df57215 --- /dev/null +++ b/src/Pollinations/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 ( + + + + ); +}); + +export default Icon; diff --git a/src/Pollinations/index.md b/src/Pollinations/index.md new file mode 100644 index 00000000..f4d33d1f --- /dev/null +++ b/src/Pollinations/index.md @@ -0,0 +1,66 @@ +--- +nav: Components +group: Icons +title: Pollinations +atomId: Pollinations +description: https://pollinations.ai` +--- + +## Icons + +```tsx +import { Pollinations } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ; +``` + +## Text + +```tsx +import { Pollinations } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Pollinations } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + +); +``` + +## Avatars + +```tsx +import { Pollinations } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +import { Pollinations } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ( + + + +); +``` diff --git a/src/Pollinations/index.ts b/src/Pollinations/index.ts new file mode 100644 index 00000000..a50b8e26 --- /dev/null +++ b/src/Pollinations/index.ts @@ -0,0 +1,20 @@ +import Avatar from './components/Avatar'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +export type CompoundedIcon = typeof Mono & { + Avatar: typeof Avatar; + Combine: typeof Combine; + + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedIcon; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; +export default Icons; diff --git a/src/Pollinations/style.ts b/src/Pollinations/style.ts new file mode 100644 index 00000000..05bad406 --- /dev/null +++ b/src/Pollinations/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.6; +export const SPACE_MULTIPLE = 0.3; +export const COLOR_PRIMARY = '#000'; diff --git a/src/components/Dashboard/Text.tsx b/src/components/Dashboard/Text.tsx new file mode 100644 index 00000000..cc2ae4ca --- /dev/null +++ b/src/components/Dashboard/Text.tsx @@ -0,0 +1,57 @@ +import * as Icons from '@lobehub/icons'; +import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import { createStyles } from 'antd-style'; +import { memo } from 'react'; +import { Flexbox } from 'react-layout-kit'; + +import IconPreview from '@/components/IconPreview'; + +const data = Object.values(Icons).filter((icon: any) => icon?.colorPrimary); + +const useStyles = createStyles(({ css, token }) => ({ + item: css` + height: 96px; + padding: 16px; + background: ${token.colorBgContainer}; + border: none; + `, +})); + +const Dashboard = memo<{ className: string }>(({ className }) => { + const { styles } = useStyles(); + const store = useCreateStore(); + + const { size, color } = useControls( + { + color: { + color: true, + value: '#fff', + }, + size: { + max: 96, + min: 16, + step: 1, + value: 24, + }, + }, + { store }, + ); + + return ( + + + {data.map((Icon: any, index) => { + const IconRender = Icon.Text || Icon.Brand; + if (!IconRender) return null; + return ( + + + + ); + })} + + + ); +}); + +export default Dashboard; diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx new file mode 100644 index 00000000..270715a5 --- /dev/null +++ b/src/components/Dashboard/index.tsx @@ -0,0 +1,57 @@ +import * as Icons from '@lobehub/icons'; +import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import { createStyles } from 'antd-style'; +import { memo } from 'react'; +import { Flexbox } from 'react-layout-kit'; + +import IconPreview from '@/components/IconPreview'; + +const data = Object.values(Icons).filter((icon: any) => icon?.colorPrimary); + +const useStyles = createStyles(({ css, token }) => ({ + item: css` + width: 96px; + height: 96px; + background: ${token.colorBgContainer}; + border: none; + `, +})); + +const Dashboard = memo<{ className: string }>(({ className }) => { + const { styles } = useStyles(); + const store = useCreateStore(); + + const { size, color, monochrome } = useControls( + { + color: { + color: true, + value: '#fff', + }, + monochrome: false, + size: { + max: 96, + min: 16, + step: 1, + value: 48, + }, + }, + { store }, + ); + + return ( + + + {data.map((Icon: any, index) => { + const IconRender = !monochrome && Icon.Color ? Icon.Color : Icon; + return ( + + + + ); + })} + + + ); +}); + +export default Dashboard; diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx new file mode 100644 index 00000000..8aad8e65 --- /dev/null +++ b/src/components/DownloadButton/index.tsx @@ -0,0 +1,29 @@ +import { ActionIcon, ActionIconSize, DivProps, TooltipProps } from '@lobehub/ui'; +import { Download } from 'lucide-react'; +import { memo } from 'react'; + +export interface DownloadButtonProps extends DivProps { + className?: string; + onClick?: () => void; + placement?: TooltipProps['placement']; + size?: ActionIconSize; +} + +const DownloadButton = memo( + ({ className, placement = 'right', size = 'site', onClick, ...rest }) => { + return ( + + ); + }, +); + +export default DownloadButton; diff --git a/src/components/IconPreview/index.tsx b/src/components/IconPreview/index.tsx index e6646b6a..a82fe9c1 100644 --- a/src/components/IconPreview/index.tsx +++ b/src/components/IconPreview/index.tsx @@ -1,7 +1,8 @@ -import { CopyButton } from '@lobehub/ui'; import { createStyles } from 'antd-style'; import { ReactNode, memo, useRef } from 'react'; -import { Flexbox } from 'react-layout-kit'; +import { Flexbox, FlexboxProps } from 'react-layout-kit'; + +import DownloadButton from '@/components/DownloadButton'; const useStyles = createStyles(({ css, token, cx }) => { return { @@ -49,17 +50,23 @@ const useStyles = createStyles(({ css, token, cx }) => { }; }); -export interface IconPreviewProps { +export interface IconPreviewProps extends FlexboxProps { children: string | ReactNode; } -const IconPreview = memo(({ children }) => { - const { styles } = useStyles(); +const IconPreview = memo(({ className, children, ...rest }) => { + const { cx, styles } = useStyles(); const ref = useRef(null); const isString = typeof children === 'string'; return ( - + {isString ? (
) : ( @@ -67,9 +74,20 @@ const IconPreview = memo(({ children }) => { {children}
)} - { + const svgString = String(ref?.current?.querySelector('svg')?.outerHTML); + const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); + const url = URL.createObjectURL(blob); + const downloadLink = document.createElement('a'); + downloadLink.href = url; + downloadLink.download = 'icon.svg'; + document.body.append(downloadLink); + downloadLink.click(); + downloadLink.remove(); + URL.revokeObjectURL(url); + }} /> ); diff --git a/src/index.ts b/src/index.ts index db99b456..52082df6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,12 +4,21 @@ export { default as Aws, type CompoundedIcon as AwsProps } from './Aws'; export { default as Azure, type CompoundedIcon as AzureProps } from './Azure'; export { default as Baichuan, type CompoundedIcon as BaichuanProps } from './Baichuan'; export { default as Bedrock, type CompoundedIcon as BedrockProps } from './Bedrock'; +export { default as Bing, type CompoundedIcon as BingProps } from './Bing'; export { default as ChatGLM, type CompoundedIcon as ChatGLMProps } from './ChatGLM'; export { default as Cloudflare, type CompoundedIcon as CloudflareProps } from './Cloudflare'; export { default as Cohere, type CompoundedIcon as CohereProps } from './Cohere'; +export { default as Copilot, type CompoundedIcon as CopilotProps } from './Copilot'; export { default as Dalle, type CompoundedIcon as DalleProps } from './Dalle'; +export { default as DeepMind, type CompoundedIcon as DeepMindProps } from './DeepMind'; export { default as Fireworks, type CompoundedIcon as FireworksProps } from './Fireworks'; export { default as Gemini, type CompoundedIcon as GeminiProps } from './Gemini'; +export { default as Github, type CompoundedIcon as GithubProps } from './Github'; +export { + default as GithubCopilot, + type CompoundedIcon as GithubCopilotProps, +} from './GithubCopilot'; +export { default as Google, type CompoundedIcon as GoogleProps } from './Google'; export { default as HuggingFace, type CompoundedIcon as HuggingFaceProps } from './HuggingFace'; export { default as Hunyuan, type CompoundedIcon as HunyuanProps } from './Hunyuan'; export { default as IconAvatar, type IconAvatarProps } from './IconAvatar'; @@ -18,9 +27,11 @@ export { default as Meta, type CompoundedIcon as MetaProps } from './Meta'; export { default as Midjourney, type CompoundedIcon as MidjourneyProps } from './Midjourney'; export { default as Minimax, type CompoundedIcon as MinimaxProps } from './Minimax'; export { default as Mistral, type CompoundedIcon as MistralProps } from './Mistral'; +export { default as Moonshot, type CompoundedIcon as MoonshotProps } from './Moonshot'; export { default as Ollama, type CompoundedIcon as OllamaProps } from './Ollama'; export { default as OpenAI, type CompoundedIcon as OpenAIProps } from './OpenAI'; export { default as Perplexity, type CompoundedIcon as PerplexityProps } from './Perplexity'; +export { default as Pollinations, type CompoundedIcon as PollinationsProps } from './Pollinations'; export { default as Qingyan, type CompoundedIcon as QingyanProps } from './Qingyan'; export { default as Replicate, type CompoundedIcon as ReplicateProps } from './Replicate'; export { default as Spark, type CompoundedIcon as SparkProps } from './Spark';