mcpField
P
pickapicon-mcp

pickapicon-mcp

本地服务
github.com/Leee62媒体与设计474 周前更新
代码仓库

关于 pickapicon-mcp

pickapicon-mcp 是面向前端开发者、UI 设计师和设计师的 MCP 服务，用于获取 SVG 图标。它通过 Iconify API 按描述查找图标，并获取对应的 SVG 代码。

主要功能

  1. 01列出 Iconify 图标仓库
  2. 02按描述和前缀查找图标
  3. 03按名称和前缀获取 SVG 详情

适用场景

  1. 01为组件或页面查找 SVG 图标
  2. 02获取指定图标的 SVG 代码
  3. 03搜索采用现代设计色彩的图标

MCP 相关

该 MCP 服务提供列出 Iconify 仓库、搜索图标以及按图标名称和前缀获取 SVG 代码的工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "pickapicon": {
      "command": "npx",
      "args": [
        "-y",
        "pickapicon-mcp"
      ],
      "env": {
        "PREFIX": "<PREFIX>"
      }
    }
  }
}
启动命令npx -y pickapicon-mcp
需要配置的环境变量
PREFIX

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmpickapicon-mcp

工具

3

收录的工具列表 · 更新于 3 周前

此工具无需参数。

详细介绍

pickapicon-mcp

logo

smithery badge 中文文档 English

描述

这是一个 MCP，可供 FE/UI/Designer 通过 Iconify API 获取 SVG。

使用 pickapicon-mcp 时，你只需向大模型描述所需内容，无需前往网站查找并手动复制 SVG。

它可以简化获取 SVG 的工作流，让你与 MCP 和大模型共舞 😎。

👉👉 图标仓库网站 Iconify 👈👈

工具

  • get_icon_repos

    • 获取所有仓库名称，供其他工具使用参数 <prefix>

  • get_icons_by_desc_and_prefix

    • 根据输入的描述和前缀获取图标
    • 输入：
      • desc：所需内容的描述
      • prefix?：前缀

  • get_icon_detail_by_prefix_and_name

    • 根据前缀和 SVG 名称获取图标详情（SVG 代码）
    • 输入：
      • svg_name：SVG 名称
      • prefix?：前缀

快速开始

通过 Smithery 安装

通过 Smithery 为 Claude Desktop 自动安装 Pickapicon MCP：

npx -y @smithery/cli install @Leee62/pickapicon-mcp --client claude

这是 MCP 服务配置

  "mcpServers": {
    "pickapicon-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "pickapicon-mcp@latest"
      ],
      "env": {
        "PREFIX": "<LIKE ant-design>"
      }
    }
  }

示例

  • 快速获取 COMPONENT / PAGE 相关的 SVG case2
  • 获取现代设计风格的彩色 SVG case1

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。