Vue

Installation

npm install @whydrf/nava-icon-vue

Usage

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

<template>
  <HomeIcon />
  <SearchIcon :size="24" color="gray" />
</template>

Mode

Switch between regular (stroke) and filled (solid) variants with the mode prop.

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

<template>
  <CheckCircleIcon mode="regular" />
  <CheckCircleIcon mode="filled" />
  <HomeIcon mode="filled" color="blue" />
</template>

Dynamic Import

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

<template>
  <NavaIcon name="home" />
  <NavaIcon name="search" :size="24" color="gray" />
  <NavaIcon name="check-circle" mode="filled" />
</template>

Global Configuration

Install the NavaIcon plugin to set default icon props. All icons inherit these values.

// 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')

Component props always override plugin values. Use useNavaIconConfig to read the current config:

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

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