✨ feat: Add Magic

src/Magic/components/Avatar.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/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 || COLOR_PRIMARY}
+      color={'#000'}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Magic/components/Combine.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/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/Magic/components/Mono.tsx

@@ -0,0 +1,27 @@
+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="M15.294 20.628c-4.8 0-8.706-3.9-8.706-8.695 0-1.168.948-2.116 2.118-2.116s2.12.948 2.12 2.116a4.47 4.47 0 004.468 4.463 4.47 4.47 0 004.468-4.463V8.97c0-1.169.95-2.116 2.12-2.116C23.051 6.854 24 7.8 24 8.97v2.963c0 4.794-3.906 8.695-8.706 8.695z"></path>
+      <path d="M2.119 17.074A2.117 2.117 0 010 14.958v-2.964C0 7.2 3.906 3.3 8.706 3.3c4.8 0 8.706 3.9 8.706 8.694a2.117 2.117 0 01-2.118 2.116 2.117 2.117 0 01-2.12-2.116 4.47 4.47 0 00-4.468-4.462 4.47 4.47 0 00-4.468 4.462v2.964a2.117 2.117 0 01-2.12 2.116z"></path>
+    </svg>
+  );
+});
+
+export default Icon;

src/Magic/components/Text.tsx

@@ -0,0 +1,25 @@
+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, width: 'fit-content', ...style }}
+      viewBox="0 0 73 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M2 .365h3.887L11.73 14.74 17.47.365h3.808v18.261h-2.895V5.191l-5.479 13.435h-2.53L4.896 5.191v13.435H2V.366zM28.17 18.783c-2.922 0-4.878-1.435-4.878-3.913 0-2.74 1.982-4.279 5.739-4.279h3.34v-.808c0-1.487-1.07-2.4-2.923-2.4-1.67 0-2.79.782-3 1.956h-2.765c.287-2.609 2.53-4.226 5.896-4.226 3.548 0 5.582 1.696 5.582 4.852v8.661H32.71l-.235-1.904c-.913 1.2-2.19 2.06-4.304 2.06zm-2.009-4.096c0 1.122.94 1.904 2.479 1.904 2.348 0 3.704-1.382 3.73-3.443v-.47h-3.496c-1.747 0-2.713.652-2.713 2.009zM40.175 19.357c.34 1.486 1.644 2.347 3.627 2.347 2.452 0 3.834-1.174 3.834-3.73v-1.487c-.886 1.33-2.27 2.191-4.356 2.191-3.626 0-6.313-2.53-6.313-6.782 0-4.096 2.687-6.783 6.313-6.783 2.087 0 3.521.913 4.383 2.244l.313-2.087h2.451v12.808c0 3.626-2.034 5.922-6.834 5.922-3.548 0-6.026-1.643-6.287-4.643h2.87zm-.313-7.461c0 2.608 1.54 4.408 3.887 4.408 2.348 0 3.887-1.8 3.887-4.356 0-2.635-1.539-4.461-3.887-4.461s-3.887 1.826-3.887 4.409zM52.92 5.27h2.817v13.356H52.92V5.27zm-.287-3.574C52.633.704 53.39 0 54.355 0s1.722.704 1.722 1.696c0 .991-.757 1.695-1.722 1.695s-1.722-.704-1.722-1.695zM64.368 18.783c-4.043 0-6.626-2.635-6.626-6.809 0-4.122 2.661-6.86 6.705-6.86 3.443 0 5.582 1.903 6.13 4.93H67.63c-.366-1.566-1.487-2.53-3.235-2.53-2.27 0-3.757 1.825-3.757 4.46 0 2.609 1.487 4.409 3.757 4.409 1.721 0 2.87-.992 3.209-2.53h2.973c-.522 3.025-2.79 4.93-6.209 4.93z"></path>
+    </svg>
+  );
+});
+
+export default Icon;

src/Magic/index.md

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

src/Magic/index.ts

@@ -0,0 +1,21 @@
+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/Magic/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'Magic';
+export const TEXT_MULTIPLE = 0.75;
+export const SPACE_MULTIPLE = 0.2;
+export const COLOR_PRIMARY = '#fff';

src/index.ts

@@ -48,6 +48,7 @@ export { default as Langfuse, type CompoundedIcon as LangfuseProps } from './Lan
 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';
+export { default as Magic, type CompoundedIcon as MagicProps } from './Magic';
 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';