内置免费图标！SymbolGlyphs｜鸿蒙动效开发笔记 04｜Extras

这篇笔记将介绍 HarmonyOS NEXT 应用开发里非常好用的 官方内置图标库 和 原生图标组件。

妙用这套组合拳可以解决几乎一切 UI 设计资源上的问题，并且将开发的 App 与原生鸿蒙风格完美契合！

补充资料：

官方图标库网站：

HarmonyOS Symbol 主题图标库（不全）https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

Liny 为了方便自己写的图标一览（API 12 Release 2761 个图标全，已开源）：

项目链接：

https://gitee.com/awa_Liny/Linys_Ani_Examples_NEXThttps://gitee.com/awa_Liny/Linys_Ani_Examples_NEXThttps://github.com/awaLiny2333/Linys_Ani_Examples_NEXThttps://github.com/awaLiny2333/Linys_Ani_Examples_NEXT

（包含了鸿蒙动效开发笔记的所有案例内容）

使用 SymbolGlyph 显示图标：

由于图标在系统中的存在形式为 Resource（资源），因此使用 $r('sys.symbol.xxx') 调用。

SymbolGlyph($r('sys.symbol.ohos_trash'))

这样，设置图标的属性可以使用和设置文本等组件一样的方式：

.fontSize(233)
.fontWeight(FontWeight.Bold)
.fontColor(['red'])

只是有一个需要注意的点：

这里的 fontColor 需要填入 ResourceColor 数组（Array<ResourceColor>）

这是因为 SymbolGlyph 支持图标 分区着色，数组的三个项分别着色图标的三个部分（应该没记错 ¯\_(ツ)_/¯）。

如果只是想让整个图标显示成一个颜色，则只消传入一个 只有一项 的 ResourceColor 数组即可。

粘贴为 Unicode 文字：

在 官方的图标库网站 上点击图标右上角的三个点（…），还可以见到一个“复制 Symbol”的选项。

点了之后，这个图标便会被复制为 Unicode 字符，可以在 HarmonyOS Sans 字体中显示。

如：

这个界面左上角的返回按钮图标，实际上是复制为 Symbol 后得到的 Unicode 字符，填进 Text() 组件里显示出来的，而非 SymbolGlyph 或 Image 图像。

这有一个好处，就是可以把图标和文字无缝衔接：在写操作指引、图标按钮等业务场景十分高效。

（可以省略把 Text 和 SymbolGlyph 装在一起的 Row 或 Column 等容器！）

但是有一个问题：

那就是这个图标只在 HarmonyOS NEXT 机型上搭载的新字体中提供（目前），因此在默认为另一种字体的 DevEco Studio 中是无法正常显示的：

并且，在官网 设计资源-HarmonyOS设计-开发者联盟 上下载的 HarmonyOS Sans 字体中也尚未包含这些图标（华子，开门，催更！）

一些后话

有了这个东西之后，Liny 再也没有在第三方网站上找过图标。这两千多个图标估计永远也用不完。

（不过里面有很多抽象的东西，比如这个：睡觉有危险（ 睡眠质量警告？

还有长得略显恐怖的猫咪：

甚至有小动物爪子：

还有某个绿泡泡：

总之，这些图标还是非常实用的，基本可以覆盖 App 开发的所有需要素材（除了某些特定元素、场景……）。不过似乎很少人知道这么个东西的存在（？

感谢你读到这里！如果文章内容中含有错误，也请评论区各路大佬斧正！ORZ

咱们下次再见啦！（可能会关于 SymbolGlyph 的动画！