Dynamic API

Use the Icon component when icon names are determined at runtime.

React

import { Icon } from '@whydrf/nava-icon-react'
<Icon name="home" size={24} color="blue" />

Vue

<script setup>
import { Icon } from '@whydrf/nava-icon-vue'
</script>

<template>
  <Icon name="home" :size="24" color="blue" />
</template>

Trade-offs

Dynamic API bundles all icon data. Use static imports when possible for optimal bundle size.

Global Configuration

The Icon component also inherits values from the global provider/plugin. Provider props are applied first, then overridden by individual component props.

import { NavaIconProvider, Icon } from '@whydrf/nava-icon-react'

<NavaIconProvider size={20} color="gray">
  <Icon name="home" />           {/* size=20, color="gray" */}
  <Icon name="search" size={24} /> {/* size=24 overrides — color inherited */}
</NavaIconProvider>