Icon

🎨 图标生成·转换·精灵图全能工具

一站式图标生成与转换工具,支持 SVG 生成、精灵图合并、格式转换及 favicon 全套生成,适合前端和设计工作流自动化。

收藏
3.1k
安装
1k
版本
3.4.0
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心用法

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 颜色规范,无效值可能导致解析异常

Icon 内容

scripts文件夹
手动下载zip · 5.2 kB
script.shtext/x-shellscript
请选择文件