From 3c59b2d05770416b04e9fba42ec0b0fbf8682074 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Wed, 17 Dec 2025 11:22:14 +0800 Subject: [PATCH] feat: add new general SVG icons and update icon exports - Introduced multiple new SVG icons including AddCategory, AiChat, Aicon27, AiEssentialsIconSet, AiPrompt, Brain, BrainCircuit, BrainCog, CodeAi, Emoji, Group, MessageAi1, MessageBalloonAi1, and Vector. - Updated the icons index file to include the new icons for easier access. - Enhanced the icons component structure for better maintainability. --- packages/ui/icons/general/add-category.svg | 3 + packages/ui/icons/general/ai-chat.svg | 5 + .../icons/general/ai-essentials-icon-set.svg | 6 + packages/ui/icons/general/ai-prompt.svg | 5 + packages/ui/icons/general/aicon-27.svg | 6 + packages/ui/icons/general/brain-circuit.svg | 3 + packages/ui/icons/general/brain-cog.svg | 3 + packages/ui/icons/general/brain.svg | 3 + packages/ui/icons/general/code-ai.svg | 6 + packages/ui/icons/general/emoji.svg | 7 ++ packages/ui/icons/general/group.svg | 3 + packages/ui/icons/general/message-ai-1.svg | 6 + .../ui/icons/general/message-balloon-ai-1.svg | 6 + packages/ui/icons/general/vector.svg | 7 ++ .../components/icons/general/addCategory.tsx | 11 ++ .../src/components/icons/general/aiChat.tsx | 28 +++++ .../icons/general/aiEssentialsIconSet.tsx | 27 +++++ .../src/components/icons/general/aiPrompt.tsx | 28 +++++ .../src/components/icons/general/aicon27.tsx | 33 ++++++ .../ui/src/components/icons/general/brain.tsx | 15 +++ .../components/icons/general/brainCircuit.tsx | 15 +++ .../src/components/icons/general/brainCog.tsx | 15 +++ .../src/components/icons/general/codeAi.tsx | 36 ++++++ .../ui/src/components/icons/general/emoji.tsx | 44 ++++++++ .../ui/src/components/icons/general/group.tsx | 12 ++ .../ui/src/components/icons/general/index.ts | 22 ++++ .../components/icons/general/messageAi1.tsx | 35 ++++++ .../icons/general/messageBalloonAi1.tsx | 36 ++++++ .../src/components/icons/general/vector.tsx | 38 +++++++ packages/ui/src/components/icons/index.ts | 2 +- .../components/icons/Icons.stories.tsx | 105 ++++++++++++++++++ 31 files changed, 570 insertions(+), 1 deletion(-) create mode 100644 packages/ui/icons/general/add-category.svg create mode 100644 packages/ui/icons/general/ai-chat.svg create mode 100644 packages/ui/icons/general/ai-essentials-icon-set.svg create mode 100644 packages/ui/icons/general/ai-prompt.svg create mode 100644 packages/ui/icons/general/aicon-27.svg create mode 100644 packages/ui/icons/general/brain-circuit.svg create mode 100644 packages/ui/icons/general/brain-cog.svg create mode 100644 packages/ui/icons/general/brain.svg create mode 100644 packages/ui/icons/general/code-ai.svg create mode 100644 packages/ui/icons/general/emoji.svg create mode 100644 packages/ui/icons/general/group.svg create mode 100644 packages/ui/icons/general/message-ai-1.svg create mode 100644 packages/ui/icons/general/message-balloon-ai-1.svg create mode 100644 packages/ui/icons/general/vector.svg create mode 100644 packages/ui/src/components/icons/general/addCategory.tsx create mode 100644 packages/ui/src/components/icons/general/aiChat.tsx create mode 100644 packages/ui/src/components/icons/general/aiEssentialsIconSet.tsx create mode 100644 packages/ui/src/components/icons/general/aiPrompt.tsx create mode 100644 packages/ui/src/components/icons/general/aicon27.tsx create mode 100644 packages/ui/src/components/icons/general/brain.tsx create mode 100644 packages/ui/src/components/icons/general/brainCircuit.tsx create mode 100644 packages/ui/src/components/icons/general/brainCog.tsx create mode 100644 packages/ui/src/components/icons/general/codeAi.tsx create mode 100644 packages/ui/src/components/icons/general/emoji.tsx create mode 100644 packages/ui/src/components/icons/general/group.tsx create mode 100644 packages/ui/src/components/icons/general/index.ts create mode 100644 packages/ui/src/components/icons/general/messageAi1.tsx create mode 100644 packages/ui/src/components/icons/general/messageBalloonAi1.tsx create mode 100644 packages/ui/src/components/icons/general/vector.tsx create mode 100644 packages/ui/stories/components/icons/Icons.stories.tsx diff --git a/packages/ui/icons/general/add-category.svg b/packages/ui/icons/general/add-category.svg new file mode 100644 index 0000000000..8f6e66b88c --- /dev/null +++ b/packages/ui/icons/general/add-category.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/icons/general/ai-chat.svg b/packages/ui/icons/general/ai-chat.svg new file mode 100644 index 0000000000..9b98e21f7e --- /dev/null +++ b/packages/ui/icons/general/ai-chat.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ui/icons/general/ai-essentials-icon-set.svg b/packages/ui/icons/general/ai-essentials-icon-set.svg new file mode 100644 index 0000000000..87c5203cc7 --- /dev/null +++ b/packages/ui/icons/general/ai-essentials-icon-set.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/icons/general/ai-prompt.svg b/packages/ui/icons/general/ai-prompt.svg new file mode 100644 index 0000000000..94e87d3c4b --- /dev/null +++ b/packages/ui/icons/general/ai-prompt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ui/icons/general/aicon-27.svg b/packages/ui/icons/general/aicon-27.svg new file mode 100644 index 0000000000..8f4b8016d3 --- /dev/null +++ b/packages/ui/icons/general/aicon-27.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/icons/general/brain-circuit.svg b/packages/ui/icons/general/brain-circuit.svg new file mode 100644 index 0000000000..ed7f944db2 --- /dev/null +++ b/packages/ui/icons/general/brain-circuit.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/icons/general/brain-cog.svg b/packages/ui/icons/general/brain-cog.svg new file mode 100644 index 0000000000..0ad36951d6 --- /dev/null +++ b/packages/ui/icons/general/brain-cog.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/icons/general/brain.svg b/packages/ui/icons/general/brain.svg new file mode 100644 index 0000000000..74e1cf7d95 --- /dev/null +++ b/packages/ui/icons/general/brain.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/icons/general/code-ai.svg b/packages/ui/icons/general/code-ai.svg new file mode 100644 index 0000000000..87dbb9869e --- /dev/null +++ b/packages/ui/icons/general/code-ai.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/icons/general/emoji.svg b/packages/ui/icons/general/emoji.svg new file mode 100644 index 0000000000..73a9d323fb --- /dev/null +++ b/packages/ui/icons/general/emoji.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/ui/icons/general/group.svg b/packages/ui/icons/general/group.svg new file mode 100644 index 0000000000..057f357612 --- /dev/null +++ b/packages/ui/icons/general/group.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/icons/general/message-ai-1.svg b/packages/ui/icons/general/message-ai-1.svg new file mode 100644 index 0000000000..cab66723e2 --- /dev/null +++ b/packages/ui/icons/general/message-ai-1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/icons/general/message-balloon-ai-1.svg b/packages/ui/icons/general/message-balloon-ai-1.svg new file mode 100644 index 0000000000..c47d8f5312 --- /dev/null +++ b/packages/ui/icons/general/message-balloon-ai-1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/icons/general/vector.svg b/packages/ui/icons/general/vector.svg new file mode 100644 index 0000000000..a90e9455ad --- /dev/null +++ b/packages/ui/icons/general/vector.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/ui/src/components/icons/general/addCategory.tsx b/packages/ui/src/components/icons/general/addCategory.tsx new file mode 100644 index 0000000000..c333ac4d3d --- /dev/null +++ b/packages/ui/src/components/icons/general/addCategory.tsx @@ -0,0 +1,11 @@ +import type { SVGProps } from 'react' +const AddCategory = (props: SVGProps) => ( + + + +) +export { AddCategory } +export default AddCategory diff --git a/packages/ui/src/components/icons/general/aiChat.tsx b/packages/ui/src/components/icons/general/aiChat.tsx new file mode 100644 index 0000000000..c2c1aacdae --- /dev/null +++ b/packages/ui/src/components/icons/general/aiChat.tsx @@ -0,0 +1,28 @@ +import type { SVGProps } from 'react' +const AiChat = (props: SVGProps) => ( + + + + + +) +export { AiChat } +export default AiChat diff --git a/packages/ui/src/components/icons/general/aiEssentialsIconSet.tsx b/packages/ui/src/components/icons/general/aiEssentialsIconSet.tsx new file mode 100644 index 0000000000..ac96e1c165 --- /dev/null +++ b/packages/ui/src/components/icons/general/aiEssentialsIconSet.tsx @@ -0,0 +1,27 @@ +import type { SVGProps } from 'react' +const AiEssentialsIconSet = (props: SVGProps) => ( + + + + + + +) +export { AiEssentialsIconSet } +export default AiEssentialsIconSet diff --git a/packages/ui/src/components/icons/general/aiPrompt.tsx b/packages/ui/src/components/icons/general/aiPrompt.tsx new file mode 100644 index 0000000000..c4502de581 --- /dev/null +++ b/packages/ui/src/components/icons/general/aiPrompt.tsx @@ -0,0 +1,28 @@ +import type { SVGProps } from 'react' +const AiPrompt = (props: SVGProps) => ( + + + + + +) +export { AiPrompt } +export default AiPrompt diff --git a/packages/ui/src/components/icons/general/aicon27.tsx b/packages/ui/src/components/icons/general/aicon27.tsx new file mode 100644 index 0000000000..69ac19d5b0 --- /dev/null +++ b/packages/ui/src/components/icons/general/aicon27.tsx @@ -0,0 +1,33 @@ +import type { SVGProps } from 'react' +const Aicon27 = (props: SVGProps) => ( + + + + + + +) +export { Aicon27 } +export default Aicon27 diff --git a/packages/ui/src/components/icons/general/brain.tsx b/packages/ui/src/components/icons/general/brain.tsx new file mode 100644 index 0000000000..8c2a606962 --- /dev/null +++ b/packages/ui/src/components/icons/general/brain.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react' +const Brain = (props: SVGProps) => ( + + + +) +export { Brain } +export default Brain diff --git a/packages/ui/src/components/icons/general/brainCircuit.tsx b/packages/ui/src/components/icons/general/brainCircuit.tsx new file mode 100644 index 0000000000..75650f1a10 --- /dev/null +++ b/packages/ui/src/components/icons/general/brainCircuit.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react' +const BrainCircuit = (props: SVGProps) => ( + + + +) +export { BrainCircuit } +export default BrainCircuit diff --git a/packages/ui/src/components/icons/general/brainCog.tsx b/packages/ui/src/components/icons/general/brainCog.tsx new file mode 100644 index 0000000000..e10bac2289 --- /dev/null +++ b/packages/ui/src/components/icons/general/brainCog.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react' +const BrainCog = (props: SVGProps) => ( + + + +) +export { BrainCog } +export default BrainCog diff --git a/packages/ui/src/components/icons/general/codeAi.tsx b/packages/ui/src/components/icons/general/codeAi.tsx new file mode 100644 index 0000000000..42febc0c1e --- /dev/null +++ b/packages/ui/src/components/icons/general/codeAi.tsx @@ -0,0 +1,36 @@ +import type { SVGProps } from 'react' +const CodeAi = (props: SVGProps) => ( + + + + + + +) +export { CodeAi } +export default CodeAi diff --git a/packages/ui/src/components/icons/general/emoji.tsx b/packages/ui/src/components/icons/general/emoji.tsx new file mode 100644 index 0000000000..84d9207dcb --- /dev/null +++ b/packages/ui/src/components/icons/general/emoji.tsx @@ -0,0 +1,44 @@ +import type { SVGProps } from 'react' +const Emoji = (props: SVGProps) => ( + + + + + + + +) +export { Emoji } +export default Emoji diff --git a/packages/ui/src/components/icons/general/group.tsx b/packages/ui/src/components/icons/general/group.tsx new file mode 100644 index 0000000000..7a360b1eb8 --- /dev/null +++ b/packages/ui/src/components/icons/general/group.tsx @@ -0,0 +1,12 @@ +import type { SVGProps } from 'react' +const Group = (props: SVGProps) => ( + + + +) +export { Group } +export default Group diff --git a/packages/ui/src/components/icons/general/index.ts b/packages/ui/src/components/icons/general/index.ts new file mode 100644 index 0000000000..d8bc963d07 --- /dev/null +++ b/packages/ui/src/components/icons/general/index.ts @@ -0,0 +1,22 @@ +/** + * Auto-generated icon exports + * Do not edit manually + * + * Generated at: 2025-12-17T03:03:51.054Z + * Total icons: 14 + */ + +export { AddCategory } from './addCategory' +export { AiChat } from './aiChat' +export { Aicon27 } from './aicon27' +export { AiEssentialsIconSet } from './aiEssentialsIconSet' +export { AiPrompt } from './aiPrompt' +export { Brain } from './brain' +export { BrainCircuit } from './brainCircuit' +export { BrainCog } from './brainCog' +export { CodeAi } from './codeAi' +export { Emoji } from './emoji' +export { Group } from './group' +export { MessageAi1 } from './messageAi1' +export { MessageBalloonAi1 } from './messageBalloonAi1' +export { Vector } from './vector' diff --git a/packages/ui/src/components/icons/general/messageAi1.tsx b/packages/ui/src/components/icons/general/messageAi1.tsx new file mode 100644 index 0000000000..ecc0cabfff --- /dev/null +++ b/packages/ui/src/components/icons/general/messageAi1.tsx @@ -0,0 +1,35 @@ +import type { SVGProps } from 'react' +const MessageAi1 = (props: SVGProps) => ( + + + + + + +) +export { MessageAi1 } +export default MessageAi1 diff --git a/packages/ui/src/components/icons/general/messageBalloonAi1.tsx b/packages/ui/src/components/icons/general/messageBalloonAi1.tsx new file mode 100644 index 0000000000..53761d4fc9 --- /dev/null +++ b/packages/ui/src/components/icons/general/messageBalloonAi1.tsx @@ -0,0 +1,36 @@ +import type { SVGProps } from 'react' +const MessageBalloonAi1 = (props: SVGProps) => ( + + + + + + +) +export { MessageBalloonAi1 } +export default MessageBalloonAi1 diff --git a/packages/ui/src/components/icons/general/vector.tsx b/packages/ui/src/components/icons/general/vector.tsx new file mode 100644 index 0000000000..19ee63010e --- /dev/null +++ b/packages/ui/src/components/icons/general/vector.tsx @@ -0,0 +1,38 @@ +import type { SVGProps } from 'react' +const Vector = (props: SVGProps) => ( + + + + + + + +) +export { Vector } +export default Vector diff --git a/packages/ui/src/components/icons/index.ts b/packages/ui/src/components/icons/index.ts index ce739c93e2..41e9bafda4 100644 --- a/packages/ui/src/components/icons/index.ts +++ b/packages/ui/src/components/icons/index.ts @@ -2,5 +2,5 @@ * Icons 模块统一导出 */ -// 导出所有生成的彩色品牌 Logo 图标（81个） +export * from './general' export * from './logos' diff --git a/packages/ui/stories/components/icons/Icons.stories.tsx b/packages/ui/stories/components/icons/Icons.stories.tsx new file mode 100644 index 0000000000..2d72163764 --- /dev/null +++ b/packages/ui/stories/components/icons/Icons.stories.tsx @@ -0,0 +1,105 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { + AddCategory, + AiChat, + Aicon27, + AiEssentialsIconSet, + AiPrompt, + Brain, + BrainCircuit, + BrainCog, + CodeAi, + Emoji, + Group, + MessageAi1, + MessageBalloonAi1, + Vector +} from '../../../src/components/icons/general' + +// Icon 列表，包含组件和名称 +const icons = [ + { Component: AddCategory, name: 'AddCategory' }, + { Component: AiChat, name: 'AiChat' }, + { Component: Aicon27, name: 'Aicon27' }, + { Component: AiEssentialsIconSet, name: 'AiEssentialsIconSet' }, + { Component: AiPrompt, name: 'AiPrompt' }, + { Component: Brain, name: 'Brain' }, + { Component: BrainCircuit, name: 'BrainCircuit' }, + { Component: BrainCog, name: 'BrainCog' }, + { Component: CodeAi, name: 'CodeAi' }, + { Component: Emoji, name: 'Emoji' }, + { Component: Group, name: 'Group' }, + { Component: MessageAi1, name: 'MessageAi1' }, + { Component: MessageBalloonAi1, name: 'MessageBalloonAi1' }, + { Component: Vector, name: 'Vector' } +] + +interface IconsShowcaseProps { + fontSize?: number +} + +const IconsShowcase = ({ fontSize = 32 }: IconsShowcaseProps) => { + return ( +
+ {icons.map(({ Component, name }) => ( +
+
+ +
+

{name}

+
+ ))} +
+ ) +} + +const meta: Meta = { + title: 'Components/Icons/General', + component: IconsShowcase, + parameters: { + layout: 'fullscreen' + }, + tags: ['autodocs'], + argTypes: { + fontSize: { + control: { type: 'number', min: 16, max: 64, step: 4 }, + description: 'Icon 大小（通过 fontSize 控制，因为图标使用 1em 单位）', + defaultValue: 32 + } + } +} + +export default meta +type Story = StoryObj + +/** + * 展示所有 14 个通用图标 + * + * 这些图标使用 SVGR 的 `icon: true` 选项生成，具有以下特点： + * - 使用 `width="1em"` 和 `height="1em"`，响应父元素的 `fontSize` + * - 保留所有原始 SVG 属性（颜色、渐变、clipPath 等） + * - 支持标准的 SVG props（className, style, onClick 等） + * + * ## 使用示例 + * + * ```tsx + * import { Brain } from '@cherrystudio/ui/icons' + * + * // 通过 fontSize 控制大小 + *
+ * + *
+ * + * // 通过 className 控制（Tailwind） + * + * + * // 使用标准 SVG props + * + * ``` + */ +export const AllIcons: Story = { + args: { + fontSize: 32 + } +}