Icons

Notivue Icons

Choose between two sets of icons picked from Ionicons:

import {
  filledIcons, // Applied by default
  outlinedIcons
} from 'notivue'

As with the theme, switch to a different set of icons by importing and passing it to the icons prop:

<script setup>
import {
  Notivue,
  Notification,
  outlinedIcons
} from 'notivue'
</script>

<template>
  <Notivue v-slot="item">
    <Notification
      :item="item"
      :icons="outlinedIcons"
    />
  </Notivue>

  <!-- RouterView, etc. -->
</template>

Colors and sizes can be customized in theme config.

Custom Icons

For each notification type, pass either a string or a component wrapped in markRaw:

<script setup>
import { markRaw } from 'vue'
import { Notivue, Notification } from 'notivue'

import MySuccessIcon from './MySuccessIcon.vue'

const myIcons = {
  success: markRaw(MySuccessIcon),
  error: '⛔️'
  promise: null, // No icon
  close: null // Do not render close button
  // ...
}
</script>

<template>
  <Notivue v-slot="item">
    <Notification :item="item" :icons="myIcons" />
  </Notivue>

  <!-- RouterView, etc. -->
</template>

MySuccessIcon.vue example

<template>
  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path
      fill="currentColor"
      d="M9.71093422,1.9716895 C8.93428422,0.6761035 7.05680422,0.6761035 6.28015422,1.9716895 L0.287692215,11.9681595 C-0.511423785,13.3011595 0.448847215,14.9964595 2.00308422,14.9964595 L13.9880442,14.9964595 C15.5422442,14.9964595 16.5025442,13.3011595 15.7034442,11.9681595 L9.71093422,1.9716895 Z M7.99556422,9.9964595 L9.06454422,6.4331995 C9.27936422,5.7171295 8.74315422,4.9964595 7.99556422,4.9964595 C7.24796422,4.9964595 6.71176422,5.7171295 6.92658422,6.4331995 L7.99556422,9.9964595 Z M7.99554422,12.9964595 C8.54783422,12.9964595 8.99554422,12.5487595 8.99554422,11.9964595 C8.99554422,11.4441595 8.54783422,10.9964595 7.99554422,10.9964595 C7.44326422,10.9964595 6.99554422,11.4441595 6.99554422,11.9964595 C6.99554422,12.5487595 7.44326422,12.9964595 7.99554422,12.9964595 Z"
    />
  </svg>
</template>

WARNING

Use currentColor instead of hard-coding the value so that theme-defined colors are retained.

Resources

• SVG Spinners - Collection of 50 lightweight animated SVG spinners by Utkarsh Verma
• Icônes - Icon Explorer by Antfu