Icon - NativePHP mobile v4

Icon

Overview#

Displays a platform-native icon. On iOS, icons render as SF Symbols. On Android, icons render as Material Icons. A smart mapping system translates common icon names across platforms automatically.

Copied!

<native:icon name="home" :size="24" color="#1E293B" />

<native:icon name="home" :size="24" color="#1E293B" />

Props#

All shared layout and style attributes are supported, plus:

name - Icon name (required unless ios/android are given, string). See the Icons reference
ios / android - Per-platform overrides: an SF Symbol name for iOS and a Material Icon name for Android, so one tag renders the right symbol on each platform. Use in place of name when the platforms need different icons (<native:icon ios="gearshape" android="settings" />)
size - Icon size in dp (optional, float, default: 24)
color - Icon color as hex string (optional, default: platform default)
a11y-label - Accessibility label (optional). Icons are decorative by default — hidden from screen readers unless this is set. Label any icon that conveys meaning on its own. See Accessibility

Examples#

Basic icons#

Copied!

<native:row :gap="16" :align-items="1">
    <native:icon name="home" :size="24" />
    <native:icon name="search" :size="24" />
    <native:icon name="settings" :size="24" />
    <native:icon name="person" :size="24" />
</native:row>

<native:row :gap="16" :align-items="1">
    <native:icon name="home" :size="24" />
    <native:icon name="search" :size="24" />
    <native:icon name="settings" :size="24" />
    <native:icon name="person" :size="24" />
</native:row>

Colored icon with label#

Copied!

<native:row :gap="8" :align-items="1">
    <native:icon name="check" :size="20" color="#22C55E" />
    <native:text class="text-base" color="#22C55E">Verified</native:text>
</native:row>

<native:row :gap="8" :align-items="1">
    <native:icon name="check" :size="20" color="#22C55E" />
    <native:text class="text-base" color="#22C55E">Verified</native:text>
</native:row>

Large icon#

Copied!

<native:column center :padding="32">
    <native:icon name="email" :size="64" color="#94A3B8" />
    <native:text class="text-lg text-slate-400">No messages</native:text>
</native:column>

<native:column center :padding="32">
    <native:icon name="email" :size="64" color="#94A3B8" />
    <native:text class="text-lg text-slate-400">No messages</native:text>
</native:column>

Platform-specific icon#

Copied!

<native:icon
    name="{{ \Native\Mobile\Facades\System::isIos() ? 'car.side.fill' : 'directions_car' }}"
    :size="28"
/>

<native:icon
    name="{{ \Native\Mobile\Facades\System::isIos() ? 'car.side.fill' : 'directions_car' }}"
    :size="28"
/>

Element#

Copied!

use Nativephp\NativeUi\Elements\Icon;
 
Icon::make('home')->size(24)->color('#1E293B');

use Nativephp\NativeUi\Elements\Icon;

Icon::make('home')->size(24)->color('#1E293B');

make(string $name = '') - Create an icon
size(float $size) - Icon size in dp
color(string $hex) - Icon color
a11yLabel(string $label) - Accessibility label (icons are hidden from screen readers without one)