SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场icon-ops

icon-ops

前端与建站

查看项目

更新于 10-15 13:53

技能介绍

icon-ops 是一个面向 Web UI 的 SVG 图标处理技能，目标是把图标从“能显示”推进到“能正确换肤、授权清晰、风格统一、对屏幕阅读器友好”。它适用于在项目中选型、引入、规范化和交付图标的场景。

用途

该技能围绕图标进入代码库前后的完整链路展开，重点解决以下问题：图标在悬停、暗色模式或主题切换时不变色；多套图标混用导致网格、描边宽度、圆角语言不一致；使用品牌 Logo 时不清楚商标授权边界；仅图标按钮被屏幕阅读器重复或错误播报；外部 sprite 在生产环境因 CORS 不渲染；favicon 与 Android maskable 图标被裁切等。

主要能力

  1. 选型决策：在引入任何图标前锁定网格（24/20/16）、风格族（描边/填充/配对）、描边宽度（1.5/2，需全组一致）和圆角语言（圆头/方头）四项决策。资料给出 Lucide、Heroicons、Phosphor 等默认建议，并说明仅在原集合确实缺少概念时才引入第二套，且需匹配网格与描边宽度。

  2. 授权审查：区分文件许可证与商标。品牌标识即使以 CC0 发布，仍归其所有者所有；指示性使用（如“Sign in with GitHub”）可行，但暗示背书、改色或放入自有 Logo 不可行。资料比较 Simple Icons、theSVG、Brandfetch 三种品牌标识来源，并提醒聚合器（如 Iconify）会隐藏各集合的许可证，需在图标进入仓库时记录来源集合与许可证。

  3. 规范化：提供 scripts/normalize-icon.py，用于剥离编辑器残留、为内部 id 加命名空间（避免两个内联 SVG 的渐变互相覆盖）、移除固定宽高以便 CSS 控制尺寸、注入正确的可访问性属性，并做安全消毒（移除 script、foreignObject、on* 事件处理器和 javascript:/data:text 链接）。颜色处理支持默认单色转 currentColor、--keep-colour 保留原色、--greyscale 按 Rec.709 亮度映射灰度、--tint 扁平化为单色、--flatten 强制多色转 currentColor。多色源在未指定处理方式时以退出码 11 拒绝。

  4. 交付方式：比较 symbol sprite + use、内联 SVG、框架组件、img 标签和图标字体五种机制，指出 img 无法换色、图标字体仅适合遗留迁移。建议尺寸使用 em 而非 px，并设置 flex: none 防止 flex 父容器压扁图标。提醒外部 use 跨域会被 CORS 阻止且可能无控制台报错，应将 sprite 内联到文档。

  5. 可访问性：将图标分为装饰性和有意义两类。装饰性图标配 aria-hidden="true" 和 focusable="false"；有意义图标同样保持 SVG aria-hidden，而把名称放在控件上（如按钮的 aria-label），避免双重播报。仅图标控件需满足 24×24 CSS px 最小交互区域，且不能仅靠颜色传达含义。

  6. 变体与站点图标：品牌标识优先使用所有者发布的 mono/reversed/greyscale 资源，仅在无发布时自行生成。资料说明 filter: grayscale(1) 适合悬停效果但不适合正式资源，filter: invert(1) 不是挖空处理。Logo 墙需同时约束宽高。favicon 是独立标识，需四个文件：favicon.ico、icon.svg、apple-touch-icon.png（180×180）和 512×512 maskable PNG（内容位于中心 80% 直径圆内）。

使用方式

通过脚本命令处理 SVG，例如：

scripts/normalize-icon.py --check vendor.svg scripts/normalize-icon.py vendor.svg -o src/icons/search.svg scripts/normalize-icon.py --keep-colour acme.svg -o src/logos/acme.svg scripts/normalize-icon.py --stroke vendor.svg -o src/icons/search.svg scripts/normalize-icon.py --symbol --id i-search vendor.svg >> src/sprite.svg scripts/normalize-icon.py --json vendor.svg | jq '.data[0]'

退出码：0 成功、2 用法错误、3 文件不存在、4 不是可用 SVG、10（仅 --check）规范化会改变文件、11 多色源被拒绝。--check 可作为 CI 门禁。字节级路径优化应在规范化之后运行 SVGO，而非之前。

适用场景

适用于需要统一图标风格、实现主题换肤、处理品牌标识授权、构建 sprite、修复可访问性问题、制作 favicon 与应用图标的 Web 前端项目。

限制

该技能不覆盖双色调/三色调处理、整套图标的滤镜着色和位图转矢量描摹（指向 svg-brand-tint-ops）；不负责调色板选择（指向 color-ops）；不涉及插画与生成艺术（指向 genart-ops、isometric-ops）；也不用于创作新图标，仅负责获取、审查和交付已有图标。