SuperAPI AI 工具集

material-symbols-icon-system

设计与创作

查看项目

更新于 10-17 16:16

技能介绍

本方案介绍如何将 Material Symbols 图标以生成的 ImageVector 扩展属性形式集成到 Kotlin Compose 项目中。每个图标对应一个文件、一个扩展属性,全部挂在自有的空 object(示例为 AppIcons)上,调用方式类似 AppIcons.ArrowForwardIos。

获取方式:使用 curl --compressed 从字体自身服务渲染 Compose 源码,无需经过 SVG 转矢量步骤。文中给出请求 URL 模板与参数(24dp、var=opsz,wght,FILL,GRAD,ROND@24,400,1,0,50),下载后需做四处编辑:修改包名;把 public val <symbol_name> 改为 val AppIcons.<PascalName>;同步重命名后备字段与 name 字符串;对需要 RTL 翻转的字形(箭头、排序、有序列表)在 builder 内加 autoMirror = true。整个图标集应保持轴值一致,否则字重不一致会肉眼可见。

主要注意事项:每个图标必须单独 import 扩展属性,仅导入 AppIcons 对象无法解析;不要用 mapOf 或 when 聚合图标,否则 R8/ProGuard 无法剔除未使用项,整包矢量数据都会被保留;Image 不会着色,Icon 会从 LocalContentColor 着色,在深色背景上使用 Image 会导致图标不可见,需要时显式指定 colorFilter;ImageVector 不是 Painter,异步图片占位、DrawScope 内绘制、参数类型为 Painter 的组件都需 rememberVectorPainter,不要用正则批量替换 painterResource;仅状态对中的“关闭”半部分才使用 FILL=0 的未填充变体;颜色本身携带含义的图标(如蓝色下载勾、红色爱心)、logo 和位图占位应保留 drawable 资源;使用前需对照 codepoint 列表确认符号名,favorite_border 等旧名可解析,person_add_alt_1 等看似合理的名称则不行;响应为 gzip 编码,务必使用 --compressed 或手动解压,否则磁盘上得到二进制文件。

验证部分给出五条只读命令:检查每文件一个扩展属性、检查 defaultWidth/defaultHeight 均为 24.dp、检查无 mapOf/when 聚合、检查 Painter 槽位中无 ImageVector、统计 Image(vector) 调用中未指定 tint 的数量,以定位迁移后可能不可见的图标。要确认压缩收益,可在开启压缩构建后查看 R8 映射输出中的保留图标类。

适用场景为 Kotlin + Jetpack Compose 项目,特别是关注包体大小、需要按需保留图标的工程。限制:该方案依赖外部字体渲染服务生成源码;未提供收费、价格或平台支持信息;也未描述自动化脚本,验证命令需手动执行。