
4万+ SVG图标系统与应用
付费

Nucleo 是一个全面的图标管理生态系统,包含超过 40,000 个优质 SVG 图标,并配有专用的桌面/Web 应用程序用于资产编排。与静态图标库不同,Nucleo 提供原生应用程序,允许用户在不中断工作流的情况下搜索、自定义并以多种格式(SVG、PNG、PDF)和尺寸导出图标。它通过专用的 React 包直接集成到开发环境中,确保 UI 组件中图标实现的一致性。该平台专为可扩展性而构建,提供多种视觉风格——从像素级完美的 UI 套件到粗体、微型和等距变体——使其成为设计系统和产品团队的单一事实来源。
Nucleo 桌面应用充当本地资产管理器,允许用户无需联网即可浏览、搜索和导出 40,000 多个图标。它支持批量导出和自定义尺寸,比从基于 Web 的存储库下载单个文件快得多。这种本地优先的方法确保设计师即使在离线时也能保持一致的工作流,同时应用的内部引擎会自动处理 SVG 优化和路径简化。
Nucleo 提供专用的 React 包,允许开发者将图标作为原生组件导入。这消除了在项目目录中手动管理 SVG 文件的需要。通过使用 props 控制尺寸、颜色和描边,开发者可以根据应用状态动态更新图标样式,从而减小包体积并确保图标渲染与 UI 组件库的其余部分保持一致。
该库包含超过 40,000 个图标,涵盖 Core、UI、Sharp、Pixel 和 Micro 等不同风格。每种风格都经过精心设计,共享相同的网格和设计语言。这使得团队能够在整个产品界面中切换风格(例如从“Sharp”切换到“Pixel”),同时保持视觉和谐,这在混合来自不同开源集的图标时通常非常困难。
该应用具有集成编辑器,允许用户在导出前修改图标属性。用户可以实时调整描边粗细、圆角半径和调色板。这确保了每个导出的图标都符合项目的特定品牌指南,避免了在 Illustrator 等外部矢量软件中进行导出后编辑的需要,从而显著节省了设计到开发移交过程中的时间。
Nucleo 库中的每个图标都带有全面的元数据标签,可在 40,000 多个资产中实现亚秒级搜索结果。搜索算法理解上下文,允许用户按功能(例如“导航”、“编辑器”)或视觉特征查找图标。这种高性能搜索能力对于需要快速定位特定 UI 元素以在快速原型设计和开发周期中保持速度的大型产品团队至关重要。
从官网下载并安装适用于 macOS 或 Windows 的 Nucleo 桌面应用程序。启动应用,使用搜索栏或分类过滤器浏览 40,000 多个图标的库。选择一个图标,并在导出前使用自定义面板调整描边宽度、颜色和尺寸。将图标直接拖放到 Figma、Sketch 或 Adobe XD 等设计工具中。通过 npm 安装 @nucleo/react 包,以便在代码库中以 React 组件形式编程渲染图标。将您的项目与 Nucleo 应用同步,以保持设计资产与生产代码之间的一致性。
产品设计师使用 Nucleo 来维护图标的单一事实来源。通过使用该应用导出标准化资产,他们确保 Web 或移动应用中的所有 UI 元素共享相同的描边粗细和网格对齐,从而形成统一的视觉标识。
前端开发者使用 Nucleo React 包将图标直接注入代码中。这避免了管理数千个独立 SVG 文件的开销,允许他们通过 props 更改图标颜色和尺寸,从而加快了 UI 更新的实现速度。
从事多个项目的代理机构使用 Nucleo 应用将图标组织成自定义的“项目”或“集合”。这使他们能够快速在不同的客户设计语言之间切换,而不会因数千个未使用的资产而弄乱本地文件系统。
他们需要庞大且一致的图标库来构建高保真原型。Nucleo 解决了“图标碎片化”问题,即不同集合在风格上发生冲突,确保所有 UI 组件外观专业且统一。
他们需要一种无需手动进行 SVG 优化的编程方式来实现图标。Nucleo 的 React 集成允许他们将图标视为标准组件,从而提高代码的可维护性并缩短构建时间。
代理机构同时管理多个客户。Nucleo 提供了组织工具来保持资产库的独立性和可访问性,确保设计师能够在不同的项目需求中交付高质量、一致的作品。
图标包一次性购买(约 99 美元)。包含对所有 40,000 多个图标、桌面应用和 React 包的访问权限。无循环费用。