HarmonyOS 鸿蒙Next有开源的图标库吗？

HarmonyOS 鸿蒙Next有开源的图标库吗？ 一直在用其他库的，感觉很乱，官网上有风格统一的图标库吗？

6 回复

系统图标库： https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

更多关于HarmonyOS 鸿蒙Next有开源的图标库吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/红框出处可以自定义效果

cke_515.png

背景知识：

楼主可以使用 SymbolGlyph 当做图标。显示图标小符号的组件。相关资源可参考系统图标。

问题解决：

代码如下：

@Entry
@Component
struct SymbolPage {
    @State message: string = 'Hello World';

    build() {
        Column() {

            SymbolGlyph($r("sys.symbol.ohos_arrow_up"))
                .fontSize(26)
                .renderingStrategy(SymbolRenderingStrategy.SINGLE)
                .fontColor([Color.Black,Color.Black,Color.Yellow])

            SymbolGlyph($r("sys.symbol.worldclock"))
                .fontSize(26)
                .renderingStrategy(SymbolRenderingStrategy.SINGLE)
                .fontColor([Color.Black,Color.Black,Color.Yellow])

            SymbolGlyph($r("sys.symbol.worldclock_fill"))
                .fontSize(26)
                .renderingStrategy(SymbolRenderingStrategy.SINGLE)
                .fontColor([Color.Black,Color.Black,Color.Yellow])
        }
        .height('100%')
        .width('100%')
    }

}

真机展示：

cke_28058.png

可以前往HMOS代码工坊查看HarmonyOS图标

HarmonyOS Next目前官方未提供独立的开源图标库。系统内置的图标资源主要通过Resource Manager进行调用，开发者可使用@ohos.resourceManager模块获取系统预置图标。第三方开源图标库如IconPark已适配鸿蒙，可通过npm安装@icon-park/svg并在项目中引入使用。图标需转换为ArkTS组件形式，采用SVG标准实现矢量缩放。

目前HarmonyOS Next尚未提供官方的开源图标库。建议关注华为开发者官网或HarmonyOS设计资源页面，未来可能会推出统一的图标资源。

回到顶部