企业官网建设流程全解析

better-icons是一个命令行图标搜索工具，让你用一条命令从 200,000+ 图标、150+ 图标库中快速找到图标并获取 SVG 代码，还能一键批量下载、直接接入 Cursor、Claude Code 等 AI 编程助手。无论你是前端开发者还是刚接触命令行图标管理的新手，这篇教程都会带你从零上手。

为什么需要 better-icons？

做前端时，找图标常常是件麻烦事：在网页一个个翻、复制 SVG、担心风格不统一。AI 编程助手也经常会生成错误的 SVG 代码、占用大量 token。

better-icons解决了这些痛点：

• 🎯200,000+ 图标：覆盖 Lucide、Heroicons、Material Design（MDI）、Tabler、Phosphor 等 150+ 图标库
• ⚡命令行直接操作：搜索、获取、下载，全在终端完成
• 📦批量下载：把搜索结果一次性存成 SVG 文件
• 🤖接入 AI 助手：作为 MCP 服务器，让 Cursor、Claude Code 等自动帮你找图标

它底层对接 Iconify API。

快速安装 better-icons

安装非常简单，一行命令即可。支持npm和更快的Bun。

# 方式一：使用 npm 全局安装 npm install -g better-icons # 方式二：使用 Bun 全局安装（速度更快） bun add -g better-icons

💡 如果不想安装，也可以用npx/bunx直接运行任意命令，例如npx better-icons search arrow。

安装完成后，终端输入better-icons即可看到可用命令。

图标搜索：一行命令找到合适图标

search是最好用的命令。它会跨 150+ 图标库搜索，并显示每个图标来自哪个库。

# 搜索"箭头"相关图标，最多显示 10 个 better-icons search arrow --limit 10 # 只在 lucide 图标库中搜索 home 图标 better-icons search home --prefix lucide

search命令常用参数：

搜索结果以图标库:图标名的格式展示，比如lucide:home。这个格式就是图标 ID，后面获取图标时会用到。

搜索逻辑的实现位于 search.ts。

常用图标库速查

获取单个 SVG：直接输出到文件或脚本

确定好图标 ID 后，用get命令获取 SVG 代码。它会把 SVG 输出到终端，你可以直接重定向保存成文件。

# 获取 lucide 库的 home 图标，保存为 icon.svg better-icons get lucide:home > icon.svg # 指定颜色 #333、尺寸 24 像素 better-icons get mdi:account --color '#333' --size 24

get命令常用参数：

如果脚本需要解析 SVG，加--json会得到包含id、svg、width、height的结构化数据：

better-icons get heroicons:check --json

获取逻辑在 get.ts，SVG 的构建与配色处理在 icon-utils.ts。

批量下载图标：搜索结果一键存盘

这是最省时间的功能。加-d参数，search会把它找到的所有图标直接下载成 SVG 文件，不用一个个复制。

# 下载"arrow"搜索结果到默认目录 ./icons better-icons search arrow -d # 指定下载到 ./my-icons 目录 better-icons search check -d ./my-icons # 指定颜色、尺寸，并限制最多 64 个 better-icons search star -d -c '#000' -s 24 --limit 64

下载后的文件会按图标库--图标名.svg的规则命名（例如lucide--home.svg），方便识别来源。批量下载的核心逻辑写在 search.ts。

⚡ 小提示：批量下载时会按图标库分组请求，能显著减少网络请求次数，速度更快。

接入 AI 编程助手（MCP 服务器）

除了命令行，better-icons还能作为MCP 服务器接入 AI 编程助手。配置完成后，直接用自然语言让 AI 帮你找图标、取 SVG、同步到项目文件。

运行交互式配置向导：

# 交互式设置（自动检测你安装的助手） better-icons setup # 自动确认，配置到全局 better-icons setup -y # 只配置当前项目 better-icons setup -s project

支持的 AI 助手包括Cursor、Claude Code、OpenCode、Windsurf、VS Code (Copilot)、Google Antigravity。

配置过程会展示安装摘要并征求确认，逻辑在 setup.ts。如果想手动配置，运行better-icons config会打印各助手的配置片段和配置文件路径，逻辑在 config.ts。

AI 助手可用的图标工具

这些工具的详细说明见 README.md 和技能说明 SKILL.md。

常用命令速查表

写在最后

better-icons把"找图标、取 SVG、批量下载"这三件高频小事压缩到了几条命令行里，还能无缝接入 AI 编程助手。

• 想找图标：better-icons search <关键词>
• 想取 SVG：better-icons get <图标ID>
• 想批量下载：better-icons search <关键词> -d
• 想接入 AI 助手：better-icons setup

现在就安装试试吧，让图标管理彻底从"手动翻网页"变成"一行命令搞定"。