Web Components

Installation

npm install @whydrf/nava-icon-web-components

Usage

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

<nava-icon-home size="24"></nava-icon-home>
<nava-icon-search size="24" color="gray"></nava-icon-search>

Mode

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

<nava-icon-check-circle size="24" mode="regular"></nava-icon-check-circle>
<nava-icon-check-circle size="24" mode="filled"></nava-icon-check-circle>
<nava-icon-home size="24" mode="filled" color="blue"></nava-icon-home>

Global Configuration

Use setNavaIconConfig to set default attributes for all icons.

<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 -->

Individual attributes always override global configuration. Use getNavaIconConfig to read the current config:

import { getNavaIconConfig } from '@whydrf/nava-icon-web-components'
console.log(getNavaIconConfig())