Phosphor Icons MCP 服务器

一个模型上下文协议 (MCP) 服务器，提供对 Phosphor Icons 的访问——这是一个灵活的图标系列，包含 6 种不同的字重和超过 1,000 多个图标。

重要提示：这是一个社区驱动、AI 辅助的 MCP 服务器，并非官方仓库，也不隶属于 Phosphor Icons 项目。本项目是在 AI 辅助下创建并由社区维护的。原始 Phosphor Icons 项目可在 https://github.com/phosphor-icons 找到。

功能特性

• 🎨 6 种图标字重：细体 (thin)、轻体 (light)、常规 (regular)、粗体 (bold)、填充 (fill) 和双色 (duotone)

• 🌈 颜色自定义：应用任何颜色（十六进制、RGB、命名颜色或 currentColor）

• 📏 大小控制：以像素为单位指定自定义大小

• 🔍 搜索图标：按名称、类别或标签查找图标

• 📦 批量操作：一次获取多个图标

• 📚 目录访问：浏览所有带有元数据的可用图标

• 🛠️ 实现指南：获取特定框架的集成帮助

Related MCP server: Iconify MCP Server

安装

npm install

CLI

该包提供了一个 phosphor-icons CLI，用于在不调用 MCP 的情况下导出 SVG/PNG 资源。

对于本地开发，请先构建并运行编译后的 CLI：

npm run build
node dist/cli.js icon heart --weight bold --color "#ef4444" --size 32 --out heart.svg
node dist/cli.js icon house user gear --format png --size 24 --dir ./icons
node dist/cli.js search arrow --limit 5
node dist/cli.js categories

包安装后，使用 bin 命令：

phosphor-icons icon heart --size 16 --out heart.svg
phosphor-icons icon heart --format png --size 16 --out heart.png
phosphor-icons search arrow --limit 5
phosphor-icons categories

CLI 命令：

• icon <name...>：以 SVG 或 PNG 格式获取一个或多个图标。

• search <query>：搜索图标名称及捆绑的元数据。

• categories：列出捆绑的类别和示例。

• skill path：打印捆绑的 Codex 技能目录路径。

icon 的标志：

• --weight, -w：thin、light、regular、bold、fill 或 duotone。

• --color, -c：任何 SVG 颜色值，包括 currentColor。

• --size, -s：宽度和高度的像素大小。

• --format, -f：svg 或 png。

• --out, -o：单个图标的输出文件。

• --dir, -d：批量导出的输出目录。

CLI 首先从已安装的 @phosphor-icons/core 包中读取图标。这使得图标导出在 npm install 后保持快速、确定且离线可用。如果本地资源不可用，它将回退到 Phosphor Core GitHub 的原始 URL。

CLI 冒烟测试

npm install
npm run build
node dist/cli.js icon heart --size 16 --out live-heart.svg
node dist/cli.js icon heart --format png --size 16 --out live-heart.png
node dist/cli.js search arrow --limit 5

预期：

• live-heart.svg 包含 width="16" height="16"。

• live-heart.png 被创建且文件大小不为零。

• 搜索返回与箭头相关的图标名称。

技能扩展

此包包含一个位于 skills/phosphor-icons/SKILL.md 的 Codex/Agents 技能。 安装包后，通过以下方式定位它：

phosphor-icons skill path

该技能为代理提供了关于图标搜索、检索、导出和框架实现的简洁规则。 在向代理运行时注册技能或将技能复制到代理技能目录时，请使用此路径。

Vercel Skills CLI 兼容性

该仓库兼容 Vercel Labs skills CLI 格式：技能位于 skills/<name>/SKILL.md，且文件以 name 和 description YAML 前置元数据开头。

列出此仓库中的技能：

npm run skills:list
# or
npx skills add . --list

从本地检出安装捆绑的技能：

npx skills add . --skill phosphor-icons --agent codex --copy -y

发布后从 GitHub 安装：

npx skills add lasaths/phosphor-icons-mcp --skill phosphor-icons --agent codex -y

通过解析技能路径从 npm 包检出安装：

phosphor-icons skill path
npx skills add ./skills/phosphor-icons --agent codex --copy -y

开发

运行开发服务器：

npm run dev

这将在 8081 端口启动服务器并打开 Smithery 游乐场进行测试。

配置

服务器支持一个可选的配置参数：

• defaultWeight：设置默认图标字重（thin, light, regular, bold, fill, duotone）。默认：regular

工具

get-icon

从 Phosphor Icons 库中检索一个或多个 SVG 图标。提供单个图标名称或名称数组以进行批量检索。

参数：

• name (string, 可选)：kebab-case 格式的单个图标名称（例如 'arrow-left', 'user'）。用于单个图标。

• names (array, 可选)：用于批量检索的图标名称数组。用于多个图标。

• weight (可选)：图标字重/样式

• color (可选)：图标颜色 - 接受十六进制 (#FF0000)、RGB (rgb(255,0,0))、命名颜色 (red) 或 'currentColor'

• size (可选)：图标大小（像素，同时设置宽度和高度）

• format (可选)：输出格式 (svg 或 png)。默认：svg

• saveToFile (可选)：保存 PNG 文件的路径（仅限单个图标）

• saveDir (可选)：保存 PNG 文件的目录（仅限多个图标）

示例：

get-icon name="heart" weight="bold" color="#FF0000"
get-icon names=["star", "heart"] weight="fill" color="gold" size=48
get-icon name="user" color="currentColor"

search-icons

按名称、类别或标签搜索图标。

参数：

• query (string)：搜索词

• limit (可选)：返回的最大结果数（默认：10）

示例：

search-icons query="arrow" limit=5

list-categories

获取所有可用图标类别的列表。

资源

phosphor://catalog

流行的 Phosphor Icons 完整目录，包含元数据，包括类别、标签和可用字重。

phosphor://weights

关于 6 种可用图标字重/样式的详细信息及其最佳使用场景。

提示词

implement-icon

获取在项目中实现 Phosphor 图标的指南。

参数：

• iconName (string)：图标名称

• framework (string)：前端框架 (html, react, vue, svelte, angular)

发布到 Smithery

1. 将代码推送到 GitHub

2. 访问 smithery.ai/new

3. 连接您的 GitHub 仓库

4. 配置自动部署

图标字重

• Thin：精致、极简的笔触 - 最适合大尺寸

• Light：微妙、精致的外观 - 现代设计

• Regular：平衡、通用 - 一般用途（默认）

• Bold：强烈、有冲击力 - 强调和小尺寸

• Fill：实心、填充形状 - 强烈强调

• Duotone：双色设计 - 视觉趣味

示例

获取一个红色的粗体心形图标：

// Returns SVG content for a bold red heart icon
get-icon({ name: "heart", weight: "bold", color: "#FF0000" })

获取一个自定义大小的蓝色星形图标：

// Returns a 48px blue filled star icon
get-icon({ name: "star", weight: "fill", color: "#3B82F6", size: 48 })

搜索导航图标：

// Returns list of icons related to navigation
search-icons({ query: "navigation", limit: 10 })

为 UI 获取多个彩色图标：

// Get home, user, and settings icons all in blue
get-icon({ 
  names: ["home", "user", "gear"],
  weight: "regular",
  color: "#3B82F6",
  size: 24
})

免责声明

无保证或责任

本软件按“原样”提供，不提供任何形式的明示或暗示保证，包括但不限于适销性、特定用途的适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对因本软件或本软件的使用或其他交易而引起的任何索赔、损害或其他责任负责，无论是合同诉讼、侵权诉讼还是其他诉讼。

风险自担

• 这是一个在 AI 辅助下创建的非官方、社区驱动的项目

• 本软件不提供任何保证或支持

• 用户有责任测试和验证本软件是否适用于其用例

• 维护者不对因使用本软件而导致的任何损害、数据丢失或问题负责

• 本项目未得到官方 Phosphor Icons 项目的认可或关联

许可证

此 MCP 服务器采用 MIT 许可证。Phosphor Icons 也采用 MIT 许可证。

链接

• 🌐 Phosphor Icons 网站

• 💻 原始 Phosphor Icons 仓库 (官方)

• 📦 Phosphor Icons Core

• 📖 Smithery 文档

• 🔧 MCP 协议

致谢

• 图标：由 Phosphor Icons 提供 - 由 Tobias Fried 创建

• MCP 服务器：在 AI 辅助下创建的社区驱动项目

• 维护者：社区贡献者（与 Phosphor Icons 无关联）