Guide

Icons

Use exported icons, raw SVG files, and NmorphIcon color behavior.

NmorphIcon wrapper

`NmorphIcon` normalizes icon size and color through props so exported icons and most raw SVG icons follow the same theme tokens.

<script setup lang="ts"> import { NmorphIcon, NmorphIconSearch } from "@nmorph/nmorph-ui-kit"; </script> <template> <NmorphIcon color="var(--nmorph-accent-color)" size="large"> <NmorphIconSearch /> </NmorphIcon> </template>

Button and input icons

Buttons expose `icon` and `icon-only` slots. Text inputs expose `prepend-icon`. The focused state changes icon color together with text, so SVGs should not hardcode fill/stroke when they need to follow the component state.

Raw SVG

The docs use raw SVG imports for GitHub and translation icons. Wrap raw SVG in `NmorphIcon` when it needs size and color behavior consistent with exported icons.

Resolution is not supported

Open the documentation on a device with a screen size of at least 375px by 640px.