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

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

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

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

地址如下：

https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

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

使用方式

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

SymbolGlyph组件

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

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

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

常用的属性如下：

SymbolRenderingStrategy

SymbolEffectStrategy

多色模式

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

图标动效

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

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

SymbolSpan组件

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

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

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

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

icon组件地址：

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Ficon

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

使用方式

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

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

ohpm install @abner/icon

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

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

代码使用

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

属性介绍

常见属性配置如下：

如果系统的图标和icon图标，还无法满足你的需求，那么还有一个宝藏的图标平台，那就是阿里图标库。

地址如下：

https://www.iconfont.cn

这绝对是独立开发者的天堂，这里有无数的图标资源，格式各样，支持各种图片格式，比如，png、svg等，同样，也支持颜色更改。

各式各样的图标，任你去挑选。

同样，也支持搜索，可以根据中文或者英文进行检索，非常的方便，比如搜索返回，那么就会罗列出无数个返回的图标，任你挑选。

点击之后，可以更改图标的颜色，然后底部就可以进行下载，复制到项目中使用。

目前的三种方式，可以说，完全能够满足日常的图标需求，这里最值得推荐的还是系统的图标库，毕竟自带的，不用任何的依赖，也不存在包体积的增加，大小、颜色、动效等等都可以原生实现，还是非常的方便的。当然了，如果原生无法满足的情况下，后面的两种方式，也是值得大家来尝试的，总之，选择一个自己适合的方式。