Core concepts

Icons

kara ships no icon set and no icon font. Your app brings a folder of SVGs; the config plugin turns each one into an asset-catalog image on iOS and a vector drawable on Android at prebuild, and writes their names as a type — so <Icon name="bolt" /> only compiles for an icon you have.

Set up

app.config.ts

plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]

assets/icons

assets/icons/bolt.svg   →   <Icon name="bolt" />
assets/icons/arrow-left.svg   →   <Icon name="arrow-left" />

The names land in kara-icons.d.ts (the global KaraIcons) whenever the config is read — expo start included — so a new SVG type-checks at once. Commit that file so a fresh clone type-checks too. The native assets still need a prebuild.

What an SVG may contain

Single-colour <path>s only — the platform tints every icon, with color or the surrounding tint. Anything else fails the prebuild, naming the file.
share.android.svg replaces share.svg on Android (and .ios.svg on iOS), for the glyphs the platforms draw differently.

Icon and RnIcon

Component	Draws	Where
`Icon`	SwiftUI `Image` from the asset catalog, Compose `Icon` with the drawable	Inside a `Screen` or `Island`
`RnIcon`	A `UIImageView` / `ImageView` of the same asset	Anywhere — what a list row wants

Every prop that takes an icon — IconButton, Fab, ListItem, Label, LabeledContent, Link, EmptyState, menu actions, Tabs — takes one of these names.

Without Expo

kara-icons validates a folder and writes the declaration without a prebuild — for CI, or a project that has not added the plugin yet.

Terminal

npx kara-icons ./assets/icons