代码拉取完成，页面将自动刷新
本示例基于OpenHarmony下的JavaScript UI框架，通过使用常用组件、画布组件和自定义组件等来实现一个自定义的icon组件，通过本示例可以基本了解和使用该组件。
本项目是基于OpenHarmony项目而不是HarmonyOS项目，请注意运行环境。 请参考OpenHarmony项目配置方法进行项目配置和运行。
如果你不熟悉OpenHarmony的JS开发，请参考该项目的开发讲解。
在Pages目录下，只有一个index首页，在首页中展示了icon自定义组件的使用样例。
在common文件夹下的icon文件夹是自定义的icon组件，在icon文件夹中js文件夹是icon绘制使用到的方法和数据。
下载OpenHarmony-JS-Icon项目，启动 DevEco Studio并打开工程。
进入entry->src->main->js->default->pages->index，打开index.hml。
在index.hml的第一行，引用自定义组件，这里我们将name属性设置为icon。
<element src="../../common/icon/icon.hml" name="icon"></element>
通过设置icon组件的name属性来展示不同的图标。
<icon name="chat_o" size="48"></icon>
通过设置icon组件的badge-config属性来对角标信息进行设置。
<icon name="chat_o" size="48" badge-config="{{ badgeConfig }}"></icon>
badgeConfig: {
config: {
badgeColor: "#0a59f7",
textColor: "#ffffff",
},
count: 0,
visible: true,
},
通过设置icon组件的color属性来设置，background-color可以设置图标的背景颜色。
<icon name="chat_o" size="48" color="#ED6F21" background-color="#ddddddd" ></icon>
通过设置icon组件的size属性来控制图标的大小。
<icon name="chat_o" size="24"></icon>
通过设置icon组件的disabled属性控制图标是否禁用，disabled默认为false，禁用状态设置为true时图标为灰色，color和badge-config属性只有在disabled为false时生效。
<icon name="chat_o" disabled="true" onclick="iconClick" color="red" size="48" badge-config="{{ badgeConfig }}"></icon>
通过设置icon组件的name属性设置为图片的地址。
<icon name="common/images/huawei.png" size="48"></icon>
| 属性名称 | 值类型 | 描述 |
|---|---|---|
| name | String | icon 名称 |
| class-prefix | String | icon 样式前缀（目前无效果） |
| size | Number | icon 尺寸，默认大小24px，元素是一个正方形 |
| color | String | icon 颜色，默认#333333，可以使用16进制和rgba |
| background-color | String | icon 背景颜色，默认#FFFFFF，可以使用16进制和rgba |
| badge-config | Object | icon 角标配置，详细配置参考官方文档 |
| disabled | Boolean | icon 禁用配置，默认false |
| dataClick | any | icon 自定义点击事件绑定数据，默认为null |
代码示例：
export default {
props: {
// icon 名称
name: {
default: ''
},
// icon 样式前缀
classPrefix: {
default: 'hos-icon'
},
// icon 尺寸
size: {
default: 24,
},
// icon 颜色
color: {
default: "#333333"
},
// icon 背景颜色
backgroundColor: {
default: "#ffffff"
},
// 角标配置
badgeConfig: {
default: {
config: {
badgeColor: "#0a59f7",
textColor: "#ffffff",
},
placement: "rightTop",
count: 0,
maxcount: 99,
visible: false,
label: "",
}
},
// icon 图标禁用
disabled: {
default: false
},
// icon 点击方法携带的参数
dataClick: {
default:
}
}
}
| 方法名称 | 参数 | 描述 |
|---|---|---|
| click | dataClick | 自定义的点击事件调用方法，默认参数为null，在disabled属性为true的时候不会触发此方法 |
代码示例：
hml文件，icon组件绑定点击事件和绑定点击实现参数：
<icon name="fail" size="48" onclick="iconClick" data-click="点击fail图标" ></icon>
js文件，在iconClick方法上接收参数的detail属性为绑定的数据：
iconClick(data) {
console.log("iconClick");
console.log(data.detail);
}
执行结果：
可以使用角标，使用时需将所有的badge属性作为一个对象用badge-config名称传入，这个用法参考了官方badge组件。
可以绘制图片，在name属性上设置图片路径，路径必须是绝对路径或者云路径，不能使用"./"或者"../"等开头的相对路径，而且图片尺寸需和icon的size值一样，不然可能会导致绘制不完整，官方有image组件，这个功能有点鸡肋。
虽然图标颜色可以设置透明色，但是不建议设置透明色，透明色可能会导致部分图标绘制的效果与预期相差较大。
图标的形式参考了市面上主流的图标形式，全部的图标绘制均为canvas绘制，无任何代码参考，使用的api均为鸿蒙JS UI官方api。
图标绘制使用的是canvas，虽然在一些特别细节的地方可能还比不上矢量图标清晰度，但是此库理论上可以实现任意图标，大家有需求或者有新的图标需要绘制的请评论留言，谢谢。
目前图标已绘制了230+，已基本完成计划实现的图标，还会继续更新，敬请关注。
OpenHarmony-JS-Icon经过Apache License, version 2.0授权许可。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型