人工智能AI 应用媒体生成桌面应用【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址https://gitcode.com/GitHub_Trending/ar/artcraft点击查看免费下载导读在 ArtCraft 前端工程中图标并不是全部由lucide-react单独承担的。仓库内的 frontend/libs/icons/README.md 定义了一个专门的配套库storyteller/icons专门承接 Lucide 不提供的三块能力运行时动态选择的图标、品牌 LogoDiscord、TikTok 等、以及 Lucide 没有等价物的自定义徽章HD/SD 质量标记。读完本文你将掌握这套图标体系的分工原则、DynamicIcon的正确使用姿势、品牌图标与自定义图标的实现原理以及1.2em图标尺寸背后的 Lucide 绘图网格细节可直接在 ArtCraft 的页面、弹层与工具栏组件中复用。一、为什么需要一个配套图标库Lucide 是一个优秀的开源图标集ArtCraft 的常规图标全部直接来自lucide-react。但 Lucide 有两类缺口不提供品牌标记by policyLucide 官方刻意不收录 Discord、TikTok、GitHub 这类品牌 Logo因此社交登录按钮、帮助菜单里的社区入口无法直接用 Lucide 完成图标是静态组件调用方需要根据运行时状态item.icon、条件切换动态决定渲染哪个图标时直接写死PlayIcon /或PauseIcon /并不方便。storyteller/icons就是为补上这两类缺口而存在的伴侣库。它不是一个图标全集而是一个补充集常规图标继续从lucide-react导入本库只承载 Lucide 提供不了的部分。从 frontend/libs/icons/src/index.ts 可以看到该库对外只导出三个模块export * from ./lib/dynamic-icon; export * from ./lib/brand-icons; export * from ./lib/custom-icons;对应 package.json 中定义的包名storyteller/icons版本0.0.1三者分别解决动态选择品牌 Logo自定义徽章三个问题。二、常规图标直接从 lucide-react 导入README 给出的最基础用法是常规图标不需要经过storyteller/icons直接从lucide-react导入即可import { PlayIcon } from lucide-react; PlayIcon classNameh-4 w-4 /这也是库作者刻意保持的分工原则静态调用点直接渲染 Lucide 组件把动态分发的职责留给DynamicIcon。在 frontend/libs/components/promptbox/src/lib/common/ResolutionPicker.tsx 中可以看到两者的配合——分辨率选择器没有选中任何分辨率时直接渲染SquareIcon作为兜底import { SquareIcon } from lucide-react; const getCurrentResolutionIcon (): LucideIcon { if (!useResolution) { return SquareIcon; } return getResolutionIcon(useResolution); };三、DynamicIcon运行时图标选择的正确姿势3.1 组件 APIfrontend/libs/icons/src/lib/dynamic-icon.tsx 中的实现非常精简核心是一个forwardRef包装import { forwardRef } from react; import type { LucideIcon, LucideProps } from lucide-react; export interface DynamicIconProps extends OmitLucideProps, ref { icon: LucideIcon; } export const DynamicIcon forwardRefSVGSVGElement, DynamicIconProps( function DynamicIcon({ icon: IconComponent, ...props }, ref) { return IconComponent ref{ref} {...props} /; } );关键点icon属性接收一个LucideIcon类型的组件引用而不是字符串名称——这保证了传入的必须是真实的 Lucide 组件包括本库导出的品牌图标与自定义徽章它们也都实现了LucideIcon接口其余属性直接透传给底层 SVG 组件因此className、size、width/height、strokeWidth等LucideProps全部可用通过forwardRef把SVGSVGElement的 ref 透传下去方便上层做 DOM 级操作。3.2 典型使用场景场景一条件切换toggle。README 举例icon{active ? PauseIcon : PlayIcon}。仓库里最直观的实例是分镜页的播放/暂停按钮见 frontend/apps/artcraft/app/src/pages/PageStoryboard/Storyboard.tsxbutton classNamemx-1 flex h-10 w-10 items-center justify-center rounded-[3px] bg-white text-black transition-all hover:bg-white/85 active:scale-95 onClick{isPlaying ? onPause : onPlay} title{isPlaying ? Pause : Play} DynamicIcon icon{isPlaying ? PauseIcon : PlayIcon} classNametext-sm / /button场景二数据驱动的图标。当图标来自数据结构如item.icon、app.icon时DynamicIcon是唯一可行的渲染方式。典型调用点包括frontend/apps/artcraft/app/src/components/signaled/TopBar/AppsQuickMenu.tsx 中渲染app.iconfrontend/apps/artcraft/app/src/pages/PageApps/AppsIndexPage.tsx 的icon{app.icon}frontend/apps/artcraft/app/src/components/generation-feed/DesktopGenerationGallery.tsx 的下载按钮用加载状态切换图标并配合旋转动画DynamicIcon icon{isDownloading ? LoaderCircleIcon : ArrowDownToLineIcon} className{text-xs ${isDownloading ? animate-spin : }} /注意README 明确提醒DynamicIcon只服务于运行时才知道用哪个图标的调用点如果图标在编译期就已确定应当直接渲染 Lucide 组件避免不必要的间接层。四、品牌图标内联 SVG Path 的 Brand 集合4.1 实现原理frontend/libs/icons/src/lib/brand-icons.tsx 通过一个工厂函数createBrandIcon生成所有品牌图标。每个品牌图标本质上是非 Lucide 风格的满铺路径full-bleed path使用fillcurrentColor继承文本颜色strokenone关闭描边function createBrandIcon(displayName: string, viewBoxWidth: number, viewBoxHeight: number, pathData: string): LucideIcon { const Icon forwardRefSVGSVGElement, LucideProps( ({ size, width, height, className, ...rest }, ref) ( svg ref{ref} xmlnshttp://www.w3.org/2000/svg viewBox{0 0 ${viewBoxWidth} ${viewBoxHeight}} fillcurrentColor strokenone width{width ?? size ?? 1em} height{height ?? size ?? 1em} className{className} {...rest} path d{pathData} / /svg ) ); Icon.displayName displayName; return Icon as LucideIcon; }值得注意的实现细节viewBox 各不相同与 Lucide 统一的 24×24 不同品牌图标保留各自的原始宽高比如 Discord 为 640×512、Apple 为 384×512、GitHub 为 496×512从而保证 Logo 比例不失真默认尺寸为1em因为品牌路径是满铺的不需要像 Lucide 那样放大 20%直接跟随字体大小即可数据来源源码注释明确说明路径数据取自 Font Awesome Free 6.x 的free-brands-svg-icons按 CC BY 4.0 许可使用且 npm 包本身已不再是依赖只保留了路径字符串实现了零运行时开销的路径内联。4.2 可用图标清单从源码可以确认该库目前导出以下 11 个品牌图标全部通过createBrandIcon生成并设置displayName导出名viewBox宽×高AppleIcon384×512DiscordIcon640×512GithubIcon496×512GithubAltIcon480×512InstagramIcon448×512LinkedinInIcon448×512LinuxIcon448×512RedditAlienIcon512×512TiktokIcon448×512WindowsIcon448×512YoutubeIcon576×5124.3 实际使用帮助菜单与登录弹层frontend/libs/components/help-menu/src/lib/help-menu.tsx 中同时使用了DiscordIcon、GithubIcon、YoutubeIcon作为社区/代码仓库入口的图标并以classNametext-base控制尺寸frontend/libs/components/login-modal/src/lib/login-modal.tsx 使用DiscordIcon作为第三方登录按钮的图标icon{DiscordIcon}对应测试 frontend/libs/components/login-modal/src/lib/login-modal.spec.tsx 中也会 mock 掉DiscordIcon以便单测。五、自定义徽章图标按 Lucide 描边风格绘制5.1 为什么需要自定义Lucide 里没有HD/SD 画质徽章这类语义图标。仓库的解决方案是在 24×24 的 Lucide 坐标系里手绘并沿用 Lucide 的描边风格strokecurrentColor、strokeWidth{2}、圆头端点和圆角连接使其与旁边的真实 Lucide 图标视觉上浑然一体。这正是 frontend/libs/icons/src/lib/custom-icons.tsx 里createBadgeIcon的职责function createBadgeIcon(displayName: string, label: string): LucideIcon { const Icon forwardRefSVGSVGElement, LucideProps( ({ size, width, height, className, ...rest }, ref) ( svg ref{ref} xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24 fillnone strokecurrentColor strokeWidth{2} strokeLinecapround strokeLinejoinround width{width ?? size ?? 1em} height{height ?? size ?? 1em} className{className ? lucide ${className} : lucide} {...rest} rect x2 y5 width20 height14 rx3 / text x12 y15.5 textAnchormiddle fontSize9 fontWeight700 fontFamilysystem-ui, sans-serif fillcurrentColor strokenone {label} /text /svg ) ); Icon.displayName displayName; return Icon as LucideIcon; } /** HD quality badge. */ export const HighDefinitionIcon createBadgeIcon(HighDefinitionIcon, HD); /** SD quality badge. */ export const StandardDefinitionIcon createBadgeIcon(StandardDefinitionIcon, SD);实现要点圆角矩形外壳rx3加上居中的文本标签构成一个自足的徽章与品牌图标不同这里会自动为className补上lucide类className ?lucide ${className}: lucide从而自动继承全局.lucide的尺寸规则见下一节文本标签部分显式关闭描边strokenone避免 2px 描边把字号压糊。5.2 实际使用分辨率选择器在 frontend/libs/components/promptbox/src/lib/common/ResolutionPicker.tsx 中HighDefinitionIcon/StandardDefinitionIcon被用于给不同分辨率档位打标。映射逻辑L91-L107非常清晰低于 1080p 的档位0.5K、480p、720p、1K、1080p显示 SD 徽章2K/3K/4K 显示 HD 徽章未知分辨率则fail open回退到 SDconst getResolutionIcon (resolution: CommonResolution): LucideIcon { switch (resolution) { case CommonResolution.HalfK: case CommonResolution.FourEightyP: case CommonResolution.SevenTwentyP: case CommonResolution.OneK: case CommonResolution.TenEightyP: return StandardDefinitionIcon; case CommonResolution.TwoK: case CommonResolution.ThreeK: case CommonResolution.FourK: return HighDefinitionIcon; default: console.error(Unknown resolution in icon mapping:, resolution); return StandardDefinitionIcon; // Fail open-ish } };随后这些图标既出现在下拉列表的每个选项里也作为触发按钮的图标统一通过DynamicIcon渲染并配classNameh-4 w-4icon: ( DynamicIcon icon{getResolutionIcon(resolution)} classNameh-4 w-4 / ),这正好演示了本库三个模块的协同自定义徽章由custom-icons.tsx提供动态分发交给DynamicIcon最终外观尺寸由 Tailwind 类控制。六、尺寸体系为什么 Lucide 图标要设成 1.2em6.1 网格原理README 解释了一个容易踩坑的细节Lucide 图标默认是固定的 24px 尺寸但它的可见图形绘制在 24px viewBox 内部的20px 网格上四周各留 2px 视觉留白。因此若直接设成1em实际可见的图形只占1em × (20/24) ≈ 0.83em视觉上会明显偏小设成1.2em后1.2em × (20/24) 1em可见图形恰好填满一个 em与项目之前的实心字形图标尺寸观感一致。6.2 全局样式实现ArtCraft 在每个 app 的全局样式表里统一设置了这条规则。以 frontend/apps/artcraft/app/src/styles/tailwind.css 为例/* Lucide icons ship with a fixed 24px default; size them relative to the surrounding font so they scale with text like the previous icons did. 1.2em (not 1em) because Lucide draws glyphs on a 20px grid inside a 24px viewBox — the extra 20% makes the visible mark fill a full 1em, matching the old solid-glyph sizing. Explicit w-/h-/size- utilities still win (the utilities layer is emitted later). */ layer base { .lucide { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; } }这里有三个可验证的工程决策layer base与vertical-align: -0.2em负的垂直偏移让图标与文字基线对齐更自然而layer base意味着它属于最低优先级的层显式 Tailwind 尺寸类如h-4 w-4、text-sm仍然胜出——这正是各组件里既放心传classNameh-4 w-4、又依赖全局默认尺寸的原因1.2em跟随字体图标随周围字号等比缩放切换字号时无需逐个调整图标品牌图标例外品牌图标是满铺路径且默认1em不参与1.2em的放大逻辑README 明确说明因为它们的路径本身已经填满 viewBox。七、工程化视角包结构与导出策略从 frontend/libs/icons/package.json 可以看到这个库的发布配置{ name: storyteller/icons, version: 0.0.1, type: module, main: ./dist/index.js, module: ./dist/index.js, types: ./dist/index.d.ts, exports: { ./package.json: ./package.json, .: { development: ./src/index.ts, types: ./dist/index.d.ts, import: ./dist/index.js, default: ./dist/index.js } } }值得注意的导出细节exports[.]下同时提供了development条件映射到源码src/index.ts开发环境下打包工具可以直接消费未编译的 TS 源码生产环境则走dist/index.js构建产物types指向dist/index.d.ts保证类型提示完整。目录结构也保持了一致的 Nx 库约定src/lib/下三个实现文件、src/index.ts统一出口、tsconfig*.json分别管理构建与测试的 TypeScript 配置vite.config.ts负责库的打包。新增图标时只需遵循按类别放进对应文件、统一经index.ts导出的约定即可。八、小结ArtCraft 的图标体系可以概括为三条清晰的分工原则常规图标直接用lucide-react的组件静态调用点不经过本库运行时才知道的图标数据驱动、条件切换交给DynamicIcon它只做一件事——把icon属性指定的组件渲染出来并透传所有LucidePropsLucide 没有的图标品牌 Logo、HD/SD 徽章由storyteller/icons以工厂函数生成品牌图标用满铺路径 currentColor填充自定义徽章则严格复刻 Lucide 的 24×24 坐标系与描边参数保证视觉一致性。配合全局.lucide { width/height: 1.2em }的尺寸规则源自 Lucide 20px/24px 网格原理与 Tailwind 显式类的优先级设计这套方案在 ArtCraft 的工具栏、生成画廊、分镜页、登录弹层与分辨率选择器等场景中得到了广泛复用可以作为前端工程里基于开源图标集构建自有图标体系的一个完整参考样板。赞分享人工智能AI 应用媒体生成桌面应用【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址https://gitcode.com/GitHub_Trending/ar/artcraft点击查看免费下载相关推荐自定义品牌图标使用指南自定义品牌图标使用指南 1. 项目介绍 本项目是一个为Home Assistant开发的自定义图标集旨在为用户提供了更多个性化选择以改善和控制家庭自动化系统custom-brand-icons自定义品牌图标解决方案custom brand icons自定义品牌图标解决方案 在当前的技术环境下自定义图标已经成为许多项目增强用户体验的重要手段。今天我们为您介绍一个开源项GitLens 图标体系实战为 GL Icons 字体新增自定义图标的完整指南GitLens 图标体系实战为 GL Icons 字体新增自定义图标的完整指南 导读 GitLens 扩展内部维护着一套自研的图标字体 GL Icons g开发工具版本控制上一篇BasePopup与系统PopupWindow对比为什么选择BasePopup下一篇终极指南CubiFS分布式文件系统的10个最佳架构设计实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考