图标

概述

NativePHP EDGE 组件使用智能图标映射系统，自动将图标名称转换为平台特定的图标。在 iOS 上，图标渲染为 SF Symbols，而 Android 使用 Material Icons。

你不需要担心差异！只需在组件中使用单一、一致的图标名称，EDGE 会自动处理平台转换。

工作原理

图标系统使用四层解析策略：

1. 直接平台图标 - 在 iOS 上，如果名称包含 .，它会被用作直接的 SF Symbol 路径（例如 car.side.fill）。在 Android 上，任何 Material Icon 连字名称都可以直接使用（例如 shopping_cart）。
2. 手动映射 - 常见图标和别名的显式映射（例如 home、settings、user）
3. 智能回退 - 尝试将未映射的图标名称自动转换为平台等效项
4. 默认回退 - 如果找不到匹配项，使用圆形图标

这种方法意味着你可以对常见情况使用直观的图标名称，对高级用例利用直接的平台图标，并在 iOS 和 Android 上获得一致的结果。

平台差异

iOS (SF Symbols)

在 iOS 上，图标渲染为 SF Symbols。手动映射将常见图标名称转换为其 SF Symbol 等效项。例如：

• home → house.fill
• settings → gearshape.fill
• check → checkmark.circle.fill

如果图标名称未被手动映射，系统会尝试通过尝试 .fill、.circle.fill 和 .square.fill 等变体来查找匹配的 SF Symbol。

Android (Material Icons)

在 Android 上，图标使用支持整个 Material Icons 库的轻量级基于字体的方法渲染。你可以直接使用任何 Material Icon 的连字名称（例如 shopping_cart、qr_code_2）。

手动映射为常见图标名称提供便捷的别名。例如：

• home → home
• settings → settings
• check → check
• cart → shopping_cart

直接平台图标

对于高级用例，你可以直接使用平台特定的图标名称。

iOS SF Symbols

在 iOS 上，在图标名称中包含 . 以直接使用 SF Symbol 路径：

<native:bottom-nav-item icon="car.side.fill" ... />
<native:bottom-nav-item icon="flashlight.on.fill" ... />
<native:bottom-nav-item icon="figure.walk" ... />

Android Material Icons

在 Android 上，使用任何 Material Icon 连字名称（带下划线）：

<native:bottom-nav-item icon="qr_code_2" ... />
<native:bottom-nav-item icon="flashlight_on" ... />
<native:bottom-nav-item icon="space_dashboard" ... />

平台特定图标

当你需要在每个平台上使用不同的图标时，使用 System facade：

<native:bottom-nav-item
    id="flashlight"
    icon="{{ \Native\Mobile\Facades\System::isIos() ? 'flashlight.on.fill' : 'flashlight_on' }}"
    label="Flashlight"
    url="/flashlight"
/>

当映射的图标不符合你的需求或你想使用平台特定变体时，这很有用。

基本用法

在任何支持图标的 EDGE 组件中使用 icon 属性，只需传递你想使用的图标名称：

<native:bottom-nav-item
    id="home"
    icon="home"
    label="Home"
    url="/home"
/>

图标参考

此处列出的所有图标都经过手动映射，保证在 iOS 和 Android 上一致工作。

导航

图标	描述
dashboard	网格式仪表盘视图
home	房屋/主屏幕
menu	三横线汉堡菜单
settings	齿轮/设置
account、profile、user	用户账户或个人资料
person	单人
people、connections、contacts	多人
group、groups	人群

商业和商务

图标	描述
orders、receipt	收据或订单
cart、shopping	购物车
shop、store	商店或店面
products、inventory	产品或库存

图表和数据

图标	描述
chart、barchart	条形图
analytics	分析
summary、report、assessment	摘要或报告

时间和日程

图标	描述
clock、schedule、time	时钟或时间
calendar	日历
history	历史或最近

操作

图标	描述
add、plus	添加或创建新项
edit	编辑或修改
delete	删除或移除
save	保存
search	搜索
filter	筛选
refresh	刷新或重新加载
share	分享
download	下载
upload	上传

通信

图标	描述
notifications	通知或提醒
message	消息或短信
email、mail	电子邮件
chat	聊天或对话
phone	电话或通话

导航箭头

图标	描述
back	返回或上一步
forward	前进或下一步
up	向上箭头
down	向下箭头

状态

图标	描述
check、done	勾选或完成
close	关闭或取消
warning	警告
error	错误
info	信息

认证

图标	描述
login	登录
logout、exit	登出或退出
lock	已锁定
unlock	已解锁

内容

图标	描述
favorite、heart	收藏或喜欢
star	星标或评分
bookmark	书签
image、photo	图片或照片
image-plus	添加照片
video	视频
folder	文件夹
folder-lock	锁定的文件夹
file、description	文档或文件
book-open	书籍
newspaper、news、article	新闻或文章

设备和硬件

图标	描述
camera	相机
qr、qrcode、qr-code	二维码扫描器
device-phone-mobile、smartphone	手机
vibrate	振动
bell	铃铛或通知
finger-print、fingerprint	指纹或生物识别
light-bulb、lightbulb、flashlight	灯泡或手电筒
map、location	地图或位置
globe-alt、globe、web	地球或网络
bolt、flash	闪电或闪光

音频和音量

图标	描述
speaker、speaker-wave	有声扬声器
volume-up	增大音量
volume-down	减小音量
volume-mute、mute	静音
volume-off	关闭音量
music、audio、music-note	音乐或音频
microphone、mic	麦克风

其他

图标	描述
help	帮助或问题
about、information-circle	信息或关于
more	更多选项
list	列表视图
visibility	可见
visibility_off	隐藏

最佳实践

图标具有含义，大多数用户会将图标的视觉提示与跨应用程序的底层行为或部分相关联。因此，尝试保持图标的一致使用，以帮助引导用户浏览你的应用。

• 保持一致 - 在整个应用中对相同的操作使用相同的图标名称
• 在两个平台上测试 - 如果你使用自动转换的图标，请验证它们在 iOS 和 Android 上正确显示

查找图标

Android Material Icons

在 Google Fonts Icons 浏览完整的 Material Icons 库。完全按照显示的方式使用图标名称（带下划线，例如 shopping_cart、qr_code_2）。

iOS SF Symbols

使用此社区 Figma 文件浏览 SF Symbols。虽然不全面，但这是发现可用符号的一个很好的起点。

要获取完整的库，请为 macOS 下载 SF Symbols 应用。

提示

SF Symbol 名称使用点（例如 house.fill），而 Material Icon 名称使用下划线（例如 shopping_cart）。