name: svg-icons-hunter
slug: svg-icons-hunter
version: 1.2.0
displayName: SVG 图标猎手·检索与导出
summary: "找不到对味的图标？跨 200+ 图标库比对，导出 SVG 或 React 组件。"
description: |
当代理需要搜索图标集、比较匹配结果并返回 UI 任务所需的精确 SVG 资产时，SVG 图标猎手 立即出动。这是一个狭窄的资产选择技能，而非通用的图标平台列表。
覆盖：多图标库检索（含 iconfont/阿里、Font Awesome、Ant Design、Lucide、Heroicons、Material、Tabler、Phosphor、Remix 等 200+ 库）、匹配度比较、SVG 导出与改色改尺寸、React/Vue/Svelte 组件生成、暗色模式适配、无障碍 aria-label、tree-shaking 瘦身。
当用户提到找图标、图标太丑、这个图标在哪找、加个按钮图标、图标不显示、图标风格不统一、SVG图标下载、svg转react、iconfont、Font Awesome、图标打包体积太大等信号时，主动亮剑。
环境门槛：需 Node.js ≥ 18 并全局安装 better-icons CLI（npm install -g better-icons），未安装请先装或改用 npx 临时调用。
边界：只做图标的检索、比对与导出；纯视觉方向与页面美化请改用「前端美学·雕琢大师」，位图/照片类插画素材不在范围。
license: MIT
category: design-media
subCategories: "图标资源，前端素材，UI 组件"
tags: ["图标", "SVG图标", "找图标", "iconfont", "阿里图标", "图标库", "矢量图标", "图标导出", "Font Awesome", "React组件", "Lucide", "Iconify", "图标组件", "UI素材", "前端资产"]
triggers:
- 搜索图标
- 找图标
- SVG图标
- 图标库
- UI素材
- 图标导出
- 图标组件
- 前端图标
- 矢量图标
- Better Icons
- 图标素材
- 按钮图标
- 导航图标
- 图标改色
- 图标改尺寸
- 图标转组件
- React 图标
- Vue 图标
- Lucide 图标
- Heroicons
- Tabler 图标
- Material Icons
- Feather 图标
- Iconify
- 图标 SVG 下载
- 图标风格统一
- 找不到图标
- 前端图标库
- 给页面配图标
- 图标组件化
- 图标选型
- UI 选型
- 用什么图标
- 图标推荐
- 图标库对比
- 图标风格
- 线性图标
- 实心图标
- 加粗图标
- 细线图标
- 图标尺寸
- 图标规范
- 图标设计系统
- 图标风格统一方案
- tab 图标
- 侧边栏图标
- 表单图标
- 支付图标
- 状态图标
- 错误图标
- 空状态图标
- 图标替换
- 图标批量导出
- 图标批量下载
- 图标批量替换
- 设计稿转图标
- 图标侵权
- 图标版权
- 图标授权
- 暗色模式图标
- 暗黑模式图标
- 深色模式图标
- 无障碍图标
- 图标库推荐
- 图标用哪个库
- 图标太丑
- 图标选不对
- 图标混用
- iconify 集合
- lucide 和 tabler 哪个好
- heroicons 和 lucide 区别
- 图标库有哪些
- 图标不好看
- 这个图标在哪找
- 去哪找图标
- 找图标太麻烦
- 帮我找个图标
- 给我一个图标
- 这个图标怎么画
- 图标怎么改颜色
- 图标怎么换颜色
- 图标颜色不对
- 图标不显示
- 图标加载不出来
- 图标报错
- 图标怎么居中
- 图标和文字对不齐
- 图标间距
- 图标大小不一
- 怎么把图标打包
- 图标怎么压缩
- Font Awesome
- fontawesome
- iconfont
- iconfont.cn
- 阿里图标
- 阿里巴巴矢量图标
- Ant Design图标
- antd图标
- element-plus图标
- element图标
- bootstrap-icons
- Remix Icons
- Phosphor Icons
- 图标字体
- iconfont图标
- 加个图标
- 页面要个图标
- 给这个按钮加图标
- 这几个图标风格不一致
- 怎么统一图标风格
- 换图标
- 替换图标
- 图标对不上
- 找不到合适的图标
- 图标选哪个
- svg转react
- svg转vue
- 图标怎么引入
- 按需引入图标
- 图标单独引入
- 打包体积太大
- 图标库哪个好
- 图标推荐几个
- 线性还是实心
- svg icon
- icon library
- free svg icons
- icon set
- svg icon download
- react icons
- vue icons
- icon component
- icon search
- free icon assets
author: 1991513ccie-png
source: https://github.com/1991513ccie-png/skills
github_stars: 915
agent_created: false

在图标库中查找并导出 SVG 图标（Better Icons）

Better Icons 通过 Iconify 从 200+ 图标库（Lucide、Heroicons、Material Design/MDI、Tabler、Phosphor、Remix、Solar 等）搜索并获取 SVG，覆盖 20 万+ 图标。本技能是「狭窄的资产选择技能」：帮代理精准找到、比对、导出 UI 任务所需的 SVG，而不是罗列通用图标平台。

前置依赖

• Node.js（建议 ≥ 18）。
• better-icons CLI：全局安装（推荐，npm install -g better-icons）或临时用 npx better-icons ...；Bun 用户可用 bun add -g better-icons / bunx better-icons ...。AI 代理优先全局安装，命令可直接在 $PATH 下运行。

核心工作流（5 步）

0. 选型判定（Step 0）：不要上来就搜词。先按六个维度判定需求——语义明确度 / 风格一致性（团队已锁定哪个库）/ 品牌可变性 / 是否需要多色 / 暗色模式适配 / 无障碍（图标是否是唯一表意元素），再按决策树锁定目标库与检索词。

• 复杂或有争议的选型，读 references/selection_playbook.md：A 章决策树与 if-then 决策表定库，B 章 18 类 UI 场景速查表取图标名，C 章五条替代路径处理"搜不到"，D 章工程规范（尺寸栅格 / 描边 / currentColor / 暗色 / aria-label / tree-shaking），E 章交付前自检清单。
• 简单需求（"导航加个设置图标"）不必全读手册，按 B 章速查表直接取 prefix:name 即可。
• 关键原则：团队已有默认库就一律沿用，不新引入；跨库混搭只在用户明确要求时发生。

1. 澄清需求：图标用在哪（导航 / 按钮 / 空状态 / 表单）、风格（线性 outline / 实心 solid / 任意）、目标平台；不明确时给 2–3 个候选方向，不打断节奏硬问。
2. 搜索比对：better-icons search <关键词> [--prefix <库>] [--limit <n>]，跨 200+ 库召回候选；用 --prefix lucide 等锁定风格一致的库，避免混搭。
3. 取精确 SVG：better-icons get <prefix>:<name> [--color <色值>] [--size <像素>]，输出原始 SVG（可 > icon.svg 落盘或交给调用方）。
4. 交付与定制：按需要改色 / 改尺寸、转框架组件（见下），并回写来源（prefix:name + 库名）便于溯源与替换。

常用命令（已核验）

# 搜索：跨库召回，限制数量
better-icons search arrow --limit 10
better-icons search home --prefix lucide                # 锁定 Lucide 风格
better-icons search settings --json | jq '.icons[:5]'   # 机器可读，便于比对

# 获取 SVG：输出到 stdout，可重定向落盘
better-icons get lucide:home > icon.svg
better-icons get mdi:account --color '#333' --size 24   # 改色 + 改尺寸

# 单图 JSON（便于程序化取用）
better-icons get heroicons:check --json

图标 ID 格式：prefix:name，例如 lucide:home、mdi:arrow-right、heroicons:check。热门库：lucide、mdi、heroicons、tabler、ph、ri、solar、iconamoon。

比对与选型建议

• 同一含义在多个库都有，优先固定 1–2 个库保证视觉一致（Better Icons 的 Auto-Learning 会记住你常用库并优先召回）。
• 线性 / 实心风格不要混用；按钮组、导航栏的同屏图标必须同库同风格。
• 需要「相似变体」跨库比对时，用 find_similar_icons（MCP）或手动换 prefix 搜索。

React / 框架组件

• 把图标接进项目：用 sync_icon 将图标写入项目文件（framework: react/vue/svelte/solid/svg），或先 get ... --json 取 SVG 后自行封装组件。
• 内联 SVG 会占用 token；组件化 / 集中管理优于散落复制。

MCP 接入（给 AI 代理）

• 安装：better-icons setup -a cursor,claude-code -s global（或 project）。
• 工具：search_icons / get_icon / get_icons（批量，≤20）/ list_collections / recommend_icons（按使用场景智能推荐）/ find_similar_icons / sync_icon / scan_project_icons。
• 代理优先走 MCP 工具，避免自己「猜」图标名或手搓 SVG。

质量红线

• 不手搓 SVG：代理不凭记忆生成图标路径，统一从 better-icons 取真实资产。
• 标注来源：交付的每段 SVG 附 prefix:name 与库名，便于他人溯源与替换。
• 风格一致：同屏图标同库同风格，不混搭。
• 中文优先：默认中文说明，命令与图标 ID 保持英文原样。

参考

• references/selection_playbook.md（v1.1.0 新增）：图标选型决策树与 if-then 决策表、18 类 UI 场景图标速查清单、5 条替代路径、落地工程规范（尺寸栅格 / 描边 / currentColor / 暗色 / aria-label / tree-shaking）、交付前自检清单与侵权风险细则。
• references/boundary.md：适用边界与场景清单（何时该用 / 何时别用本技能）。
• 上游文档：https://github.com/1991513ccie-png/skills （Better Icons 由 better-auth 维护，Iconify 提供数据源）

批量工作流与提速

• 批量取图标：MCP get_icons 一次取 ≤20 个，或循环 better-icons get <prefix>:<name> > <file>.svg 重定向落盘，避免逐个交互。
• 项目同步：sync_icon 按 framework: react/vue/svelte/solid 直接写入项目组件目录，统一 import 路径，杜绝散落复制。
• 风格锁定：常用库写进 Auto-Learning 记忆，或固定 --prefix，保证导航栏 / 按钮组同库同风。
• 查相似：find_similar_icons（MCP）跨库找风格一致的替代，避免混搭破坏视觉统一。

常见坑排查

• 命令找不到：优先全局 npm install -g better-icons；Bun 用 bun add -g；npx 仅临时。
• 图标名拼错：先 search 看真实 prefix:name，不凭记忆手搓，避免空 SVG / 404。
• 风格混搭：同屏图标必须同库同风格（线性 / 实心不混），否则视觉割裂。
• token 爆炸：内联 SVG 占用上下文，恒优先组件化 / 集中管理而非全文粘贴。
• 图标语义歧义（v1.1.0 新增）：图标被一半人读成 A、一半读成 B（如 x 与 close、check 与 check-check 混用），或图标含义与文案不一致 → 回 selection_playbook.md E.1 自检清单第一条，换语义更明确的图标，或改成"图标 + 文字"并让图标 aria-hidden。
• 多库混用风格不一致（v1.1.0 新增）：同屏出现 Lucide 线性 + Heroicons 实心 + Tabler，视觉重量割裂 → 用 --prefix <库> / MCP list_collections 锁定单一库；确需多库时按 E.1 第二条统一尺寸与描边，并在交付备注写清各图标归属。
• 暗色模式失色（v1.1.0 新增）：图标带死色值，暗底上糊成一片或亮到刺眼 → 交付前清掉 stroke / fill 里的固定色，改 currentColor 或 CSS 变量（D.3 / D.4），并实际切一次暗色验证，不用 filter: invert() 偷懒。
• tree-shaking 失效体积暴涨（v1.1.0 新增）：写了 import * as Icons from "lucide-react" 或整包引入，几十 KB 全进产物 → 改具名按需引入（D.6），用 scan_project_icons（MCP）查清项目里散落的硬编码图标。
• 缺 aria-label 的无障碍问题（v1.1.0 新增）：无文字标签的图标按钮没有 role="img" + aria-label，读屏器只能读出 meaningless 的 svg → 装饰图标 aria-hidden="true" + focusable="false"，唯一表意按钮补 title + aria-label 且文案一致（D.5）。

边界：什么时候不该用本技能 / 误用风险

• 要的是矢量图标本身的"检索+导出"才用本技能；如果只是要纯视觉设计方向或页面美化 → 用 前端美学·雕琢大师。
• 位图 / 插画素材（PNG、JPG、照片类） → 不在范围，本技能只出 SVG 矢量。
• 图标侵权 / 仿冒品牌标识 → 形如某大厂 logo 的图标一律弃用（商标 / 著作权风险，见 selection_playbook.md E.2）。
• 搜不到就自己画一个 → 先走 selection_playbook.md C 章五条替代路径；实在要自绘须标「自绘」且不冒用原库署名。
• 跨库随便混搭 → 同屏图标必须同库同风格（线性/实心不混），否则视觉割裂；团队已有默认库就一律沿用。
• 把图标当唯一表意却没加 aria-label → 无文字标签的图标按钮必须补 role="img" + aria-label，装饰图标 aria-hidden。

典型用户输入样例（直接可用的自然语言）

常见问答 FAQ

Q1：图标名记不住 / 拼错怎么办？
A：永远先 search 看真实 prefix:name，不要凭记忆手搓，避免空 SVG / 404。热门库：lucide、mdi、heroicons、tabler、ph、ri、solar。

Q2：命令找不到 better-icons？
A：优先全局 npm i -g better-icons；Bun 用 bun add -g；npx better-icons 仅临时。确认 Node ≥ 18。

Q3：同屏图标风格不一致怎么统一？
A：用 --prefix <库> 或 MCP list_collections 锁定单一库；确需多库时按 selection_playbook.md E.1 统一尺寸与描边，交付备注写清归属。

Q4：SVG 内联到代码里会撑爆 token 吗？
A：会。优先组件化 / 集中管理（sync_icon 写入项目组件目录），不要全文粘贴 SVG 文本。

Q5：图标和文案含义对不上（如 check vs check-check）？
A：换语义更明确的图标，或改成"图标 + 文字"并让图标 aria-hidden（见 selection_playbook.md E.1 第一条）。