Content

Icon

Your own SVG icons, drawn natively in both tiers.

iOSSwiftUI Image from the asset catalogAndroidCompose Icon with a vector drawableRenders in a Screen or an Island

iOSSwiftUI Image from the asset catalog

AndroidCompose Icon with a vector drawable

Import

import {Icon, RnIcon} from '@hzblj/kara-ui'

Props

One of the app's icons, in a host — SwiftUI Image from the asset catalog on iOS, Material's Icon with the vector drawable on Android. RnIcon draws the same asset outside one.

Prop	Type	Default	Description
name*	IconName	—	Which of the app's icons — a key of `KaraIcons`.
accessibilityLabel	string	—	What a screen reader says. Unset, the icon is decorative and hidden from it.
color	ColorToken	'content.primary'	The icon's tint. `content.primary` by default.
size	SpaceSize	's24'	Its width and height, a spacing token. `s24` by default.
testID	string	—	Test identifier, forwarded to the native view on iOS — Android ignores it.

name*

IconName

Which of the app's icons — a key of KaraIcons.

accessibilityLabel

string

What a screen reader says. Unset, the icon is decorative and hidden from it.

color'content.primary'

ColorToken

The icon's tint. content.primary by default.

size's24'

SpaceSize

Its width and height, a spacing token. s24 by default.

testID

string

Test identifier, forwarded to the native view on iOS — Android ignores it.

Platform notes

Your own SVGs, made native at prebuild by the config plugin — see Icons. The library ships no icon set.
Icon draws inside a host; RnIcon draws the same asset anywhere in React Native layout.