核心用法
Icon 技能提供六个核心命令,覆盖图标全生命周期管理:
generate:通过名称和样式参数生成 SVG 图标,支持指定尺寸(默认 24px)和颜色值,适合快速生成设计系统基础组件。
sprite:将多个 SVG 文件合并为单文件精灵图,使用 <symbol> 元素实现 ID 引用,显著减少 HTTP 请求,优化前端性能。
convert:在 ICO/PNG/SVG 格式间互转,支持批量指定多尺寸输出(如 16/32/64px),解决跨平台兼容性需求。
favicon:从源图自动生成全套 favicon 规范文件(ICO、Apple Touch、Android Chrome、webmanifest),遵循现代 PWA 标准。
search/resize:辅助功能,支持关键词检索预设图标库和批量尺寸调整。
显著优点
- 工作流整合:单工具替代 figma-to-code、ImageMagick、在线转换器等多环节
- 格式覆盖全面:覆盖 Web 开发所需全部图标格式(ICO/SVG/PNG/WebP 衍生)
- 标准合规:favicon 生成遵循 Apple HIG 和 W3C Manifest 规范
- 自动化友好:纯 Bash 实现,易于集成 CI/CD 和构建脚本
潜在局限
- 依赖本地 Bash 4+ 环境,Windows 原生支持需 WSL
- 无内置矢量编辑能力,复杂路径修改仍需专业设计软件
- 图标素材库规模与质量取决于后端数据源
适合人群
前端开发者、全栈工程师、独立开发者、设计系统维护团队,尤其适用于需要批量处理图标资产、追求构建流程自动化的技术项目。
常规风险提示
- 批量转换时注意保留源文件,避免覆盖丢失原始 SVG
- favicon 生成建议提供高分辨率源图(≥512px),防止小尺寸输出模糊
- 颜色参数需符合 CSS 颜色规范,无效值可能导致解析异常