Better Icons

🚀 更好圖標（Better Icons）

搜索並獲取來自 150 多個圖標集合的 200,000 多個圖標。可作為 AI 代理的 MCP 服務器或 CLI 工具使用。

🚀 快速開始

添加技能

你可以使用技能啟用底層圖標 CLI 功能。

npx add-skill better-auth/better-icons

MCP 服務器（AI 代理）

配置 MCP 服務器，以便在你的 AI 編碼代理中啟用圖標工具。

npx better-icons setup

此命令將交互式地為以下工具配置 MCP 服務器：

• Cursor
• Claude Code
• OpenCode
• Windsurf
• VS Code（Copilot）
• Google Antigravity

或者手動配置。

CLI（直接使用）

使用 CLI 直接從終端搜索和獲取圖標。

# 搜索圖標
npx better-icons search arrow
npx better-icons search home --prefix lucide --limit 10

# 獲取圖標 SVG（輸出到標準輸出）
npx better-icons get lucide:home > icon.svg
npx better-icons get mdi:account --color '#333' --size 24

# 用於腳本的 JSON 輸出
npx better-icons search settings --json | jq '.icons[:5]'
npx better-icons get heroicons:check --json

✨ 主要特性

• 200,000+ 圖標 - 可搜索 150 多個圖標集合（如 Lucide、Heroicons、Material Design 等）。
• 自動學習 - 記住你使用的圖標集合，並在未來搜索中優先顯示。
• 項目同步 - 圖標直接寫入你的圖標文件（.tsx、.ts、.js），而不是將 SVG 粘貼到聊天中（節省令牌！）。
• 批量檢索 - 一次獲取多個圖標。
• 相似圖標 - 在不同集合和樣式中找到相同的圖標。
• 最近使用的圖標 - 快速訪問你之前使用過的圖標。
• 多框架支持 - 支持 React、Vue、Svelte、Solid 和原始 SVG 導出。

📦 安裝指南

手動安裝

Cursor

添加到 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

Claude Code（CLI）

添加到 ~/.claude/settings.json：

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

Google Antigravity

添加到 ~/.gemini/antigravity/mcp_config.json：

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

📚 詳細文檔

MCP 工具

使用 MCP 服務器與 AI 代理時，可使用以下工具：

search_icons

在 150 多個圖標集合中搜索圖標。

搜索“arrow”圖標
在 lucide 集合中搜索“home”圖標

參數：

• query（必需）：搜索查詢（例如，'arrow'、'home'、'user'）
• limit（可選）：最大結果數（1 - 999，默認值：32）
• prefix（可選）：按集合過濾（例如，'mdi'、'lucide'）
• category（可選）：按類別過濾

get_icon

獲取特定圖標的 SVG 代碼，支持多種使用格式。

獲取 mdi:home 的 SVG
獲取 mdi:home 的 URL
獲取大小為 24 的 lucide:arrow-right

參數：

• icon_id（必需）：圖標 ID，格式為 'prefix:name'（例如，'mdi:home'）
• color（可選）：圖標顏色（例如，'#ff0000'、'currentColor'）
• size（可選）：圖標大小（像素）
• format（可選）：'svg'（默認）或 'url'

返回：

• 原始 SVG 代碼
• React/JSX 組件代碼
• Iconify 組件使用方法
• 直接 SVG URL（當 format: "url" 時）

list_collections

列出可用的圖標集合/庫。

列出所有圖標集合
搜索“material”集合

參數：

• category（可選）：按類別過濾
• search（可選）：按名稱搜索集合

recommend_icons

獲取特定用例的圖標推薦。

我應該為設置按鈕使用什麼圖標？
推薦用於用戶認證的圖標

參數：

• use_case（必需）：描述你的需求
• style（可選）：'solid'、'outline' 或 'any'
• limit（可選）：推薦數量（1 - 20）

get_icon_preferences

查看你學習到的圖標集合偏好和使用統計信息。

顯示我的圖標偏好
我最常使用哪些圖標集合？

clear_icon_preferences

重置所有學習到的圖標偏好，重新開始。

清除我的圖標偏好
重置圖標偏好

find_similar_icons

在不同集合和樣式中查找給定圖標的相似圖標或變體。

查找與 lucide:home 相似的圖標
除了 mdi:arrow-right 還有哪些箭頭圖標？

參數：

• icon_id（必需）：要查找變體的圖標 ID
• limit（可選）：相似圖標的最大數量（1 - 50，默認值：10）

get_icons

一次獲取多個圖標（批量檢索）。比多次調用 get_icon 更高效。

獲取這些圖標：lucide:home、lucide:settings、lucide:user

參數：

• icon_ids（必需）：圖標 ID 數組（最多 20 個）
• color（可選）：所有圖標的顏色
• size（可選）：所有圖標的大小（像素）

get_recent_icons

查看你最近使用的圖標，以便快速重用。

顯示我最近使用的圖標
我最近使用了哪些圖標？

參數：

• limit（可選）：顯示的最近圖標數量（1 - 50，默認值：20）

sync_icon

獲取圖標並自動將其添加到項目的圖標文件中。這是添加圖標的推薦方法。

將 lucide:home 圖標同步到我的項目
將設置圖標添加到我的圖標文件中

參數：

• icons_file（必需）：圖標文件的絕對路徑
• framework（必需）：'react'、'vue'、'svelte'、'solid' 或 'svg'
• icon_id（必需）：圖標 ID，格式為 'prefix:name'
• component_name（可選）：自定義組件名稱
• color（可選）：圖標顏色
• size（可選）：圖標大小（像素）

返回：

• 確認圖標已添加（或已存在）
• 使用的導入語句
• 使用示例

scan_project_icons

掃描圖標文件，查看項目中已有的圖標。

我的項目中已經有哪些圖標？
掃描我的圖標文件

參數：

• icons_file（必需）：圖標文件的絕對路徑

流行圖標集合

CLI 參考

搜索圖標

在 150 多個圖標集合中搜索。

better-icons search <query> [options]

獲取圖標

檢索單個圖標的 SVG 代碼。

better-icons get <icon-id> [options]

圖標 ID 格式為 prefix:name（例如，lucide:home、mdi:arrow-right）。

設置命令

better-icons setup              # 交互式設置嚮導
better-icons setup -y           # 自動確認（全局範圍）
better-icons setup -s project   # 僅為當前項目設置
better-icons config             # 顯示手動配置說明

🔧 技術細節

開發

# 安裝依賴
bun install

# 本地運行
bun run dev

# 構建
bun run build

📄 許可證

MIT