Usage

NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identify a section or application.

import { NavIcon } from '@astryx-vue/core/NavItem'

Pass a CSS icon class through iconClass, or put the icon element itself in the default slot.

Anatomy

Element	Description
Container	Circular painted container for the supplied icon.
Icon	Caller-supplied visual content rendered inside the container.

Best practices

Guidance	Practice
Do	Use in navigation headers to provide a recognizable visual anchor for the section.
Do	Pass an Icon or similarly sized icon component to ensure proper proportions.
Don't	Use NavIcon for interactive purposes; it is a display-only container, not a button.

Examples

Common configurations, variations, and states.

Basic

Circular icon containers wrapping semantic icons. Use as logos or accent icons in navigation headers such as TopNavHeading.