MCP图标服务器（进阶版）：一个基于 Model Context Protocol (MCP) 的智能图标搜索工具，专门为AI编程助手（如Cursor、Claude等）设计
🎨 MCP图标服务器：让AI助手成为您的图标搜索专家
引言
在AI编程的黄金时代，我们正见证着开发方式的革命性变革。从代码生成到智能调试，AI助手已经成为程序员不可或缺的伙伴。然而，在项目开发过程中，有一个看似简单却经常困扰开发者的任务——图标搜索。
传统图标搜索的痛点
想象一下这样的场景：您正在开发一个现代化的Web应用，需要为用户界面添加各种图标。传统的做法是：
- 打开浏览器，访问多个图标网站（iconfont.cn、Feather Icons、Heroicons等）
- 手动搜索关键词，在成千上万的图标中筛选
- 逐个预览，比较不同风格和尺寸
- 下载文件，解压、整理到项目目录
- 格式转换，将PNG转为SVG，调整颜色和尺寸
- 代码集成，手动编写导入语句和组件代码
这个过程不仅耗时费力，还容易出错。更糟糕的是，当您需要调整图标样式或寻找替代方案时，整个流程又要重复一遍。
AI时代的解决方案
现在，有了 MCP图标服务器，这一切都将成为历史！这是一个专为AI编程时代设计的智能图标搜索工具，它能够：
- 🤖 让AI助手成为您的图标专家：直接告诉AI"我需要一个用户头像图标"，它就能为您找到最合适的选项
- ⚡ 秒级响应：告别漫长的搜索等待，AI助手瞬间为您呈现最佳结果
- 🎨 智能匹配：基于上下文理解您的需求，推荐最符合项目风格的图标
- 🔄 无缝集成：搜索结果直接保存到项目目录，无需手动操作
- 🌐 海量资源：接入iconfont.cn等知名图标库，拥有数万个高质量图标
为什么选择MCP图标服务器？
在AI编程的新时代，我们需要的不仅仅是工具，而是能够与AI助手深度协作的智能伙伴。MCP图标服务器正是这样的存在——它让图标搜索从繁琐的手工操作变成了优雅的AI对话，让您的开发效率提升数倍，让创意实现变得更加流畅。
准备好体验AI时代的图标搜索革命了吗？ 让我们开始这段激动人心的旅程！
🌟 什么是MCP图标服务器？
MCP图标服务器 是一个基于 Model Context Protocol (MCP) 的智能图标搜索工具，专门为AI编程助手（如Cursor、Claude等）设计。它能够：
- 🔍 智能搜索：从iconfont.cn海量图标库中快速搜索
- 📄 详细信息：获取图标的完整元数据和SVG内容
- 🎨 灵活定制：支持自定义尺寸、颜色和格式
- ⚡ 高效缓存：内置缓存机制，提升搜索性能
- 🌐 多语言支持：中英文界面自由切换
- 🖥️ 可视化界面：提供Web界面进行图标浏览和选择
🚀 核心优势
1. AI原生设计
- 专为AI助手优化，支持自然语言交互
- 无需手动操作，AI直接理解您的需求
- 完美集成到Cursor、VS Code等现代编辑器
2. 零依赖部署
- 仅需Node.js 18+，无其他外部依赖
- 一键安装，即装即用
- 支持全局安装和项目本地安装
3. 强大的搜索能力
- 接入iconfont.cn海量图标库
- 支持关键词、分类、集合等多维度搜索
- 智能排序和过滤功能
4. 灵活的集成方式
- 支持MCP协议，与AI助手无缝集成
- 提供Web界面，支持可视化操作
- 支持命令行直接使用
📦 快速开始
安装
# 全局安装（推荐）
npm install -g @liangshanli/mcp-server-icon
# 或使用npx（无需安装）
npx @liangshanli/mcp-server-icon
Cursor编辑器集成
在项目根目录创建 .cursor/mcp.json：
{
"mcpServers": {
"icon": {
"command": "npx",
"args": ["@liangshanli/mcp-server-icon"],
"env": {
"LANGUAGE": "zh-CN",
"WEB_SERVER_AUTO_OPEN": "true"
}
}
}
}
开始使用
重启Cursor后，您就可以直接对AI说：
- “帮我搜索一个用户图标”
- “找一个播放按钮的SVG”
- “搜索所有关于搜索的图标”
🎯 使用场景
1. Web开发
- 快速为React、Vue等项目添加图标
- 获取SVG格式，支持任意缩放
- 自定义颜色和尺寸
2. 移动应用开发
- 为iOS、Android应用寻找合适的图标
- 支持多种尺寸和风格
- 批量下载和管理
3. 设计工作
- 为UI/UX设计提供图标素材
- 快速浏览和比较不同风格
- 导出高质量SVG文件
4. 文档编写
- 为技术文档添加图标说明
- 创建流程图和示意图
- 提升文档可读性
🔧 技术特性
智能缓存系统
- 30分钟缓存过期时间
- 自动缓存搜索结果和图标详情
- 支持缓存统计和清理
多语言支持
- 中文界面：
LANGUAGE=zh-CN - 英文界面：
LANGUAGE=en - 控制台和Web界面双语支持
模块化架构
- 工具方法按功能拆分
- 易于维护和扩展
- 支持独立配置和依赖注入
完整的API支持
search_icons：搜索图标get_icon_details：获取图标详情get_icon_svg：获取SVG内容save_icons：保存选中图标start_web_server：启动Web服务器
📊 性能表现
- 搜索速度：毫秒级响应
- 缓存命中率：>90%
- 内存占用：<50MB
- 包大小：114.7KB（压缩后）
🌍 社区与支持
- GitHub仓库：https://github.com/liliangshan/mcp-server-icon
- NPM包：@liangshanli/mcp-server-icon
- 许可证：MIT License
- 作者：liliangshan
🎉 立即体验
还在为寻找合适的图标而烦恼吗？立即安装MCP图标服务器，让AI成为您的图标搜索专家！
npm install -g @liangshanli/mcp-server-icon
然后告诉您的AI助手：“帮我搜索一个视频播放器图标”，看看魔法是如何发生的！
让AI助手成为您的图标搜索专家，让图标搜索变得前所未有的简单！ 🚀
🎨 MCP Icon Server: Let AI Assistants Become Your Icon Search Experts
Introduction
In the golden age of AI programming, we are witnessing revolutionary changes in development approaches. From code generation to intelligent debugging, AI assistants have become indispensable partners for programmers. However, in the project development process, there is a seemingly simple but often troubling task for developers—icon search.
Pain Points of Traditional Icon Search
Imagine this scenario: You are developing a modern web application and need to add various icons to the user interface. The traditional approach is:
- Open browser, visit multiple icon websites (iconfont.cn, Feather Icons, Heroicons, etc.)
- Manually search keywords, filter through thousands of icons
- Preview one by one, compare different styles and sizes
- Download files, extract and organize into project directories
- Format conversion, convert PNG to SVG, adjust colors and sizes
- Code integration, manually write import statements and component code
This process is not only time-consuming and laborious, but also error-prone. Even worse, when you need to adjust icon styles or find alternatives, the entire process has to be repeated.
AI Era Solution
Now, with the MCP Icon Server, all this will become history! This is an intelligent icon search tool designed specifically for the AI programming era, which can:
- 🤖 Make AI assistants your icon experts: Just tell the AI “I need a user avatar icon” and it will find the most suitable option for you
- ⚡ Second-level response: Say goodbye to long search waits, AI assistants instantly present the best results
- 🎨 Intelligent matching: Based on context understanding your needs, recommend icons that best match your project style
- 🔄 Seamless integration: Search results are directly saved to project directories without manual operation
- 🌐 Massive resources: Connected to well-known icon libraries like iconfont.cn, with tens of thousands of high-quality icons
Why Choose MCP Icon Server?
In the new era of AI programming, we need not just tools, but intelligent partners that can deeply collaborate with AI assistants. MCP Icon Server is exactly such an existence—it transforms icon search from tedious manual operations into elegant AI conversations, improving your development efficiency by several times and making creative implementation smoother.
Ready to experience the icon search revolution of the AI era? Let’s start this exciting journey!
🌟 What is MCP Icon Server?
MCP Icon Server is an intelligent icon search tool based on Model Context Protocol (MCP), specifically designed for AI programming assistants (such as Cursor, Claude, etc.). It can:
- 🔍 Intelligent search: Quickly search from iconfont.cn’s massive icon library
- 📄 Detailed information: Get complete metadata and SVG content of icons
- 🎨 Flexible customization: Support custom sizes, colors, and formats
- ⚡ Efficient caching: Built-in cache mechanism to improve search performance
- 🌐 Multi-language support: Switch between Chinese and English interfaces freely
- 🖥️ Visual interface: Provide web interface for icon browsing and selection
🚀 Core Advantages
1. AI-Native Design
- Optimized for AI assistants, supports natural language interaction
- No manual operation required, AI directly understands your needs
- Perfect integration with modern editors like Cursor, VS Code
2. Zero-Dependency Deployment
- Only requires Node.js 18+, no other external dependencies
- One-click installation, ready to use
- Supports both global and local project installation
3. Powerful Search Capabilities
- Connected to iconfont.cn’s massive icon library
- Supports multi-dimensional search by keywords, categories, collections
- Intelligent sorting and filtering functions
4. Flexible Integration Methods
- Supports MCP protocol for seamless integration with AI assistants
- Provides web interface for visual operation
- Supports direct command-line usage
📦 Quick Start
Installation
# Global installation (recommended)
npm install -g @liangshanli/mcp-server-icon
# Or use npx (no installation required)
npx @liangshanli/mcp-server-icon
Cursor Editor Integration
Create .cursor/mcp.json in your project root:
{
"mcpServers": {
"icon": {
"command": "npx",
"args": ["@liangshanli/mcp-server-icon"],
"env": {
"LANGUAGE": "zh-CN",
"WEB_SERVER_AUTO_OPEN": "true"
}
}
}
}
Start Using
After restarting Cursor, you can directly tell the AI:
- “Help me search for a user icon”
- “Find an SVG of a play button”
- “Search for all icons related to search”
🎯 Use Cases
1. Web Development
- Quickly add icons to React, Vue projects
- Get SVG format, supports any scaling
- Customize colors and sizes
2. Mobile App Development
- Find suitable icons for iOS, Android apps
- Support multiple sizes and styles
- Batch download and management
3. Design Work
- Provide icon materials for UI/UX design
- Quickly browse and compare different styles
- Export high-quality SVG files
4. Documentation Writing
- Add icon descriptions to technical documents
- Create flowcharts and diagrams
- Improve document readability
🔧 Technical Features
Intelligent Caching System
- 30-minute cache expiration time
- Automatically cache search results and icon details
- Support cache statistics and cleanup
Multi-language Support
- Chinese interface:
LANGUAGE=zh-CN - English interface:
LANGUAGE=en - Bilingual support for console and web interface
Modular Architecture
- Tool methods split by functionality
- Easy to maintain and extend
- Support independent configuration and dependency injection
Complete API Support
search_icons: Search iconsget_icon_details: Get icon detailsget_icon_svg: Get SVG contentsave_icons: Save selected iconsstart_web_server: Start web server
📊 Performance Metrics
- Search speed: Millisecond-level response
- Cache hit rate: >90%
- Memory usage: <50MB
- Package size: 114.7KB (compressed)
🌍 Community & Support
- GitHub Repository: https://github.com/liliangshan/mcp-server-icon
- NPM Package: @liangshanli/mcp-server-icon
- License: MIT License
- Author: liliangshan
🎉 Get Started Now
Still troubled by finding suitable icons? Install MCP Icon Server now and let AI become your icon search expert!
npm install -g @liangshanli/mcp-server-icon
Then tell your AI assistant: “Help me search for a video player icon” and see the magic happen!
Let AI assistants become your icon search experts, making icon search unprecedentedly simple! 🚀
