鸿蒙开发：独立开发者的烦恼之icon图标选择

前言

企业的开发者，都有自己的UI设计师，对于图标而言，基本不会发愁，但是独立开发者，就不得不自己来考虑了，做为上架过多个应用的开发者，这一点是深有体会，有时候，为了找到一个好的，并且合适的图标，需要花费很长的时间，为了让后续的开发者少走弯路，目前总结了三个可以免费获取图标的渠道，希望可以帮助到大家。

系统的图标

毋庸置疑，系统的图标是首推的，如果系统能满足的，当然以系统为主要首选。

系统图标目前大概有433个图标，包含了时间，箭头，媒体，相机与照片等多种分类，可以说是十分丰富，最大的便捷是，我们不用再额外配置什么，直接就可以使用，简直不要太方便。

地址如下：

developer.huawei.com/consumer/cn...

毕竟图标太多了，大家可以点击以上的地址去详细的查看，这里就简单的截几张图吧：

使用方式

系统的图标使用也是十分的简单，给提供了两个组件用于加载，一个是SymbolGlyph组件，另一个是SymbolSpan组件，SymbolGlyph主要用于精美的图标，如渲染多色图标和使用动效图标，而SymbolSpan，则作为Text组件的子组件，主要用于在文本中穿插显示图标小符号。

SymbolGlyph组件

代码如下，sys.symbol.后面连接的是图标的标识，大家打开上面的图标地址，每个图标下面都有自己的标识，选择适合的，复制即可。

TypeScript 复制代码

 SymbolGlyph($r('sys.symbol.airplane_fill'))
        .fontSize(50)
        .renderingStrategy(SymbolRenderingStrategy.SINGLE)
        .fontColor([Color.Red])

以上的代码，就展示了一个大小为50，颜色为红色的飞机图标，想实现什么图标，只需要把图标标识替换即可。

常用的属性如下：

SymbolRenderingStrategy

名称	值	说明
SINGLE	0	单色模式（默认值）。可以设置一个或者多个颜色，默认为黑色。当设置多个颜色时，仅生效第一个颜色。
MULTIPLE_COLOR	1	多色模式。最多可以设置三个颜色。当只设置一个颜色时，修改symbol图标的第一层颜色，其他颜色保持默认颜色。颜色设置顺序与图标分层顺序匹配，当颜色数量大于图标分层时，多余的颜色不生效。仅支持设置颜色，设置透明度设置不生效。
MULTIPLE_OPACITY	2	分层模式。默认为黑色，可以设置一个或者多个颜色。当设置多个颜色时，仅生效第一个颜色。不透明度与图层相关，symbol图标的第一层透明度为100%、第二层透明度为50%、第三层透明度为20%。

SymbolEffectStrategy

名称	值	说明
NONE	0	无动效（默认值）。
SCALE	1	整体缩放动效。
HIERARCHICAL	2	层级动效。

多色模式

TypeScript 复制代码

SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(50)
        .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
        .fontColor([Color.Black, Color.Pink])

图标动效

TypeScript 复制代码

SymbolGlyph($r('sys.symbol.ohos_wifi'))
        .fontSize(50)
        .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)

当然了，更多的案例，还是查看官方文档，目前，可以说，系统的图标已经是十分丰富，可以满足大部分的场景，不仅支持更改大小，颜色，也支持动效设置。

SymbolSpan组件

SymbolSpan可作为Text的子组件用于显示图标小符号。可以在一个Text组件内添加多个SymbolSpan，从而展示一串连续的图标，使用上也是非常的简单，简单如下所示：

TypeScript 复制代码

Text() {
  SymbolSpan($r('sys.symbol.ohos_trash'))
    .fontWeight(FontWeight.Normal)
    .fontSize(96)
}

常用的属性如下，基本上和SymbolGlyph组件类似。

属性	参数	概述
fontColor	Array<ResourceColor>	图标颜色
fontSize	number/string/Resource	图标大小
fontWeight	number/FontWeight/string	图标粗细
renderingStrategy	SymbolRenderingStrategy	组件渲染策略
effectStrategy	SymbolEffectStrategy	组件动效策略
symbolEffect	SymbolEffect,boolean	组件动效策略及播放状态

icon组件

icon组件主要解决了系统组件无法满足的情况，比如常见的分享图标，底部tab图标等，目前拥有408个常见图标，支持更改图标颜色大小，它虽然需要依赖使用，但是整个包的大小仅仅只有200KB，总体还是非常小的。

icon组件地址：

ohpm.openharmony.cn/#/cn/detail...

目前支持408个场景图标，支持颜色和大小更改，由于图标大多，这里还是截取几张效果图，详细的大家可以查看上面的地址。

使用方式

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

TypeScript 复制代码

ohpm install @abner/icon

方式二：在需要的模块中的oh-package.json5中设置三方包依赖，配置示例如下：

TypeScript 复制代码

"dependencies": { "@abner/icon": "^1.0.0"}

代码使用

TypeScript 复制代码

Icon({ iconModel: IconModel.wei_xin_circle, iconSize: 25 })

属性介绍

常见属性配置如下：

属性	类型	概述
iconModel	IconModel	图标类型，传入不同类型就会展示不同图标，目前支持408种类型，具体可看上面的图标效果，每个图标下的标识就是图标类型
iconColor	ResourceColor	图标颜色
iconSize	number/string/Resource	图标大小，也可在组件外设置
iconBorder	BorderOptions	图标边框样式