图标库SVG检索导出
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/find-and-export-svg-icons-across-icon-libraries-for-ui-work。
技能介绍
图标检索的三个真实痛点
UI 项目中的图标工作往往卡在第一步:找图标。团队可能同时维护多个图标库,搜索结果分散在不同来源;不同库的命名、预览格式、导出路径各不相同,判断哪个候选项最贴合当前界面语境的成本很高。找到图标之后,从原始来源复制 <svg> 路径、确认尺寸和 stroke 属性、整理成可直接使用的组件,这些步骤通常要手工完成,费时且容易出错。
技能的核心工作路径
这个技能把上述流程压缩成一条窄而确定的路径:
- 跨库定位:先确定目标图标位于哪个图标库,再执行检索;
- 候选对比:对跨库返回的匹配结果进行横向比较,而不是盲目采用第一个命中项;
- 精确交付:直接输出当前 UI 任务所需的确切 SVG 资源,省去中间复制粘贴环节。
它基于 better-icons 与 Node.js 环境运行,聚焦于“选什么图标、要哪个版本”这一决策点。
适用边界
需要明确的是,这是资产选择技能,不是通用图标平台列举。它不会列出某个库里的全部图标供人浏览,也不负责图标库本身的托管或分类维护。适合的使用场景是:已有明确的 UI 需求(例如“设置页需要齿轮图标”),需要快速定位并拿到可用 SVG;不适合的场景包括图标体系的整体规划、多项目视觉规范制定,或需要浏览发现新图标时的灵感探索。
使用场景
- UI设计阶段需要在多个图标库中查找同一语义的图标并选出最贴合界面语境的那一个
- 组件库开发中需要为按钮、导航等模块快速获取可用的SVG图标文件
- 设计系统维护时需要跨库确认同一图标的不同命名和规格差异
- 前端还原设计稿时需要拿到精确的SVG路径而非截图或预览图
适合人员
- UI设计师,需要在多个图标库之间快速定位并取用与当前界面最匹配的图标
- 前端开发者,需要把设计稿里的图标替换成可直接使用的SVG组件
- 设计系统工程师,负责跨项目统一图标资产并处理不同库之间的命名差异
- 独立开发者,一个人做界面时不想手动翻找图标库或逐个复制SVG代码