@web-portfolio/图标包

Published and maintain an npm component library (@web-portfolio/icons) — 629 bundled SVG icons behind one typed <Icon /> component, versioned and consumed across multiple projects instead of ad hoc per-icon imports.

View Repository View Live

它最初是为个人作品集网站设计的图标集合，但逐渐发展成为一个值得独立发布的项目：它不使用任何图标字体，运行时不需要发送CDN请求，无需异步加载任何内容。所有内容都包含在软件包中，并能立即渲染。

浏览完整的图标集，请访问：icons.getresume.dev— 通过名称或类别进行搜索，尝试任何图标上的颜色、粗细和大小控制选项，并复制精确的设置。<Icon/>可以直接获取页面上的代码片段或原始的SVG文件。

为什么会存在这种情况？

构建一个仪表盘或信息展示页面通常意味着两种情况：要么引入一种图标字体来显示少量符号，或者将各种元素分散放置。<img src="...">代码库中存在一些标签，指向可能在某些时候正常运行也可能不正常的CDN。对于像“在单词React旁边显示React的Logo”这样的小功能来说，这两种方案都不合适。这个包是另一种选择。<Icon name="react" />已完成，并且相同的组件适用于各种需求，无论是技术栈徽章、社交链接图标，还是用于轮播按钮的普通箭头。

它有意做的一些事情。

一个组件，而不是629个导入。 注册表[名称]它在渲染时进行查找，因此您永远不会得到...import { ReactIcon, DockerIcon, PostgresIcon } from '...';杂乱地堆放在文件顶部。
运行时未获取任何数据。整个注册表在构建时被打包，并使用SVGO进行优化，因此不存在加载状态、图像加载时的布局偏移，并且支持离线使用。
在合适的地方提供主题定制功能。 颜色,中风；笔画。，以及。笔画宽度属性允许您重新设置单色图标的颜色，以匹配您的配色方案；而那些应该保持特定颜色的品牌标识（例如React Logo的蓝色）则会被保留不变。
开箱即用。无。@types/一个提醒安装的包。

安装。

使用 npm 安装 @web-portfolio/icons 包。

使用 pnpm 添加 @web-portfolio/icons 包。

使用 yarn 安装 `@web-portfolio/icons` 包。

需要React 18或更高版本。

一个注册中心，两个已发布的软件包，和一个静态图库。

已发布的软件包是四个软件包、两个应用程序组成的单仓库的一部分。`packages/db` 包含一个针对 Turso/libSQL 的 Drizzle 模式，它是唯一与数据库交互的部分，并且仅由 `apps/admin`（一个需要身份验证的 CRUD 管理面板）和种子脚本访问。`packages/core` 是私有且内部使用的：它负责生成注册表构建步骤以及打包的 `registry.generated.ts` 文件，这两个文件都嵌入在已发布的软件包中。`packages/react` 是 `@web-portfolio/icons`；`packages/sanity-plugin` 是 `@web-portfolio/icons-sanity`，即 Studio 选择器。`apps/gallery` 是公开网站，位于 `icons.getresume.dev`，它是对同一注册表的第四个使用方，其样式参考了 `techicons.dev`。

Design detail

apps/gallery reads nothing but the committed registry.generated.ts — no database, no env vars, at request time or build time. An edit made in apps/admin only reaches the public gallery after someone reruns generate-registry and redeploys; the two are deliberately decoupled so neither the live gallery nor the two published packages ever depend on Turso being reachable.

将粘贴的SVG转换为注册表项。

`generate-registry.ts` 文件实际上负责生成 `registry.generated.ts`：它从 Turso 中提取每个图标的原始 SVG 代码，然后通过 SVGO 处理（使用多遍优化、默认预设，并暂时不移除 `viewBox`，因为 `viewBox` 会被拆分并保留），最后将其重写为紧凑的 `{viewBox, innerHTML}` 格式。这种重写只适用于黑白图标类别，包括 devicon 的 "plain" 和 "line" 变体、Material Symbols 以及 Simple Icons。对于这些图标，会用 `currentColor` 替换所有硬编码的填充/描边颜色，以便 `<Icon color>` 属性能够真正起作用。而品牌色图标类别（devicon 的 "original" 和 "original-wordmark" 变体）则完全跳过这一步，因此 React 的蓝色或 Docker 的水绿色永远不会被扁平化为周围的文本颜色。

rebuilding the registry from scratchbash

# one-time: schema + all three icon sources
pnpm --filter @web-portfolio/icons-db db:migrate
pnpm --filter @web-portfolio/icons-db seed-all

# SVGO + currentColor normalization -> packages/core/src/registry.generated.ts
pnpm generate-registry

633个图标究竟来自哪里？

三个授权来源，每个来源均有明确署名，并由各自的脚本提供：devicon（MIT协议）提供578个科技/工具图标；Material Symbols（Apache-2.0协议）提供38个图标，包括34个日常UI/导航符号，以及4个通用替代符号（闪电、翻译、清单、礼物），这些替代了之前网站使用的Apple SF Symbols PNG图标，而后者不适合从开放授权的软件包中进行分发；Simple Icons（CC0协议）提供剩余的17个图标，包括devicon未涵盖的12个社交平台logo，以及5个开发者工具标识（MCP、Google Analytics、LangChain、Ollama、Pydantic）。

并非所有请求的图标都有可供授权使用的来源——Segment、Statsig和Google Stitch均不在其中（Stitch的发布时间晚于它们的所有最新版本）。与其从没有明确分发许可的品牌资产中提取内容，不如通过应用程序/管理后台的手动“粘贴原始SVG”流程来添加这些图标，由实际操作人员完成，而不是由自动化流程处理。

注册表中的每个图标都可以精确地指向其来源，并明确该来源所使用的许可证，这比再添加一个logo更有价值。