Global Configuration

Set default icon props once and have every icon in your app inherit them. Individual icon props always override the global configuration.

Configuration Interface

All frameworks share the same configuration type from @whydrf/nava-icon-core:

interface NavaIconConfig {
  size?: number | string
  color?: string
  strokeWidth?: number
  className?: string
}

React

Use NavaIconProvider with React Context:

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

function App() {
  return (
    <NavaIconProvider size={20} color="gray" strokeWidth={1.5}>
      <HomeIcon />              {/* size=20, color="gray", strokeWidth=1.5 */}
      <HomeIcon size={32} />    {/* size=32 overrides — rest inherited */}
    </NavaIconProvider>
  )
}

Read the current config in any component:

import { useNavaIconConfig } from '@whydrf/nava-icon-react'

function DebugConfig() {
  const config = useNavaIconConfig()
  return <pre>{JSON.stringify(config)}</pre>
}

Vue

Install the NavaIcon plugin using Vue's provide/inject:

// main.ts
import { createApp } from 'vue'
import { NavaIcon } from '@whydrf/nava-icon-vue'
import App from './App.vue'

const app = createApp(App)
app.use(NavaIcon, { size: 20, color: 'gray', strokeWidth: 1.5 })
app.mount('#app')

Read the current config in any component:

<script setup>
import { useNavaIconConfig } from '@whydrf/nava-icon-vue'
const config = useNavaIconConfig()
</script>

<template>
  <pre>{{ config }}</pre>
</template>

Angular

Provide a value for the NAVA_ICON_CONFIG injection token:

// app.config.ts (standalone)
import { ApplicationConfig } from '@angular/core'
import { NAVA_ICON_CONFIG } from '@whydrf/nava-icon-angular'

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: NAVA_ICON_CONFIG,
      useValue: { size: 20, color: 'gray', strokeWidth: 1.5 },
    },
  ],
}

Or in a module:

// app.module.ts
import { NAVA_ICON_CONFIG } from '@whydrf/nava-icon-angular'

@NgModule({
  providers: [
    {
      provide: NAVA_ICON_CONFIG,
      useValue: { size: 20, color: 'gray', strokeWidth: 1.5 },
    },
  ],
})
export class AppModule {}

Web Components

Use the setNavaIconConfig function:

<script type="module">
  import '@whydrf/nava-icon-web-components'
  import { setNavaIconConfig } from '@whydrf/nava-icon-web-components'

  setNavaIconConfig({ size: 20, color: 'gray', strokeWidth: 1.5 })
</script>

<!-- All icons inherit global defaults -->
<nava-icon-home></nava-icon-home>
<nava-icon-search size="24"></nava-icon-search>  <!-- size overrides -->

Override Behavior