mcpField
B
better-icons

better-icons

github.com/better-auth设计与 UI1.4k6.0k 次安装30 周前更新
代码仓库

关于 better-icons

这是一个通过 Iconify 从 200 多个图标库中查找和获取图标的命令行工具及 MCP 服务，面向需要搜索、查看或将 SVG 图标加入项目的开发者和 AI Agent。

主要功能

  1. 01跨图标集搜索
  2. 02获取单个或多个 SVG
  3. 03浏览图标集
  4. 04按用途推荐图标
  5. 05查找不同图标集中的相似图标
  6. 06扫描项目并同步图标

适用场景

  1. 01按名称或用途查找图标
  2. 02将搜索结果下载为 SVG 文件
  3. 03将图标加入项目文件

MCP 相关

其 MCP 服务提供搜索、获取、推荐和比较图标，以及浏览图标集、扫描项目和同步图标的工具。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/better-auth/better-icons --skill better-icons

安装后在 Claude Code 中输入/better-icons确认已加载。

详细介绍

Better Icons

通过 Iconify 搜索和获取来自 200 多个图标库的图标。

安装

使用任何 better-icons 命令前，请确保该工具已在环境中可用。

选项 1 — 全局安装（推荐，与以下所有示例一致）：

# Using npm
npm install -g better-icons

# Using Bun (faster)
bun add -g better-icons

选项 2 — 无需安装即可运行（在每条命令前加上 npx 或 bunx）：

# Using npx (npm)
npx better-icons search arrow --limit 10
npx better-icons get lucide:home > icon.svg

# Using bunx (Bun — faster)
bunx better-icons search arrow --limit 10
bunx better-icons get lucide:home > icon.svg

致 AI Agent： 建议全局安装，以便将 better-icons 添加到 $PATH，从而使以下命令无需修改即可运行。在环境设置期间运行一次安装步骤，然后直接使用命令，无需加上 npx/bunx。

CLI

# Search icons
better-icons search <query> [--prefix <prefix>] [--limit <n>] [--json]

# Search and download all found icons as SVG files
better-icons search <query> -d [dir] [--color <color>] [--size <px>]

# Get icon SVG (outputs to stdout)
better-icons get <icon-id> [--color <color>] [--size <px>] [--json]

# Setup MCP server for AI agents
better-icons setup [-a cursor,claude-code] [-s global|project]

示例

better-icons search arrow --limit 10
better-icons search home --json | jq '.icons[0]'
better-icons get lucide:home > icon.svg
better-icons get mdi:home --color '#333' --json

# Batch download all search results
better-icons search arrow -d              # saves to ./icons/
better-icons search check -d ./my-icons   # saves to ./my-icons/
better-icons search star -d -c '#000' -s 24 --limit 64

图标 ID 格式

prefix:name - 例如，lucide:home、mdi:arrow-right、heroicons:check

热门图标集

lucide、mdi、heroicons、tabler、ph、ri、solar、iconamoon

MCP 工具（适用于 AI Agent）

工具描述
search_icons在所有图标库中搜索
get_icon获取单个图标的 SVG
get_icons批量获取多个图标
list_collections浏览可用的图标集
recommend_icons根据使用场景智能推荐
find_similar_icons查找不同图标集中的变体
sync_icon将图标添加到项目文件
scan_project_icons列出项目中的图标

TypeScript 接口

interface SearchIcons {
  query: string
  limit?: number        // 1-999, default 32
  prefix?: string       // e.g., 'mdi', 'lucide'
  category?: string     // e.g., 'General', 'Emoji'
}

interface GetIcon {
  icon_id: string       // 'prefix:name' format
  color?: string        // e.g., '#ff0000', 'currentColor'
  size?: number         // pixels
}

interface GetIcons {
  icon_ids: string[]    // max 20
  color?: string
  size?: number
}

interface RecommendIcons {
  use_case: string      // e.g., 'navigation menu'
  style?: 'solid' | 'outline' | 'any'
  limit?: number        // default 10
}

interface SyncIcon {
  icons_file: string    // absolute path
  framework: 'react' | 'vue' | 'svelte' | 'solid' | 'svg'
  icon_id: string
  component_name?: string
}

API

所有图标均来自 https://api.iconify.design

评论

支持 Markdown