Icon ​

VIcon component is based on @iconify/vue. It allows you to easily display icons in your Vue.js application.

Available Icons ​

You can view a list of available icons here.

Usage ​

Basic Usage ​

To use the VIcon component, simply include it in your template like this:

Sizes ​

The VIcon component allows you to specify the size of the icon using the size prop. Here are some examples of how to use it:

Morpheme Icons ​

You can use the morpheme icon collections by using these prefixes: untitled:, remix: and iconsax.

Props ​

Caching ​

By default, Morpheme Icons are cached and stored on local storage. You can disable it per usage via no-cache prop.

<template>
  <VIcon name="iconsax:twotone/add" no-cache />
</template>

<template>
  <VIcon name="iconsax:twotone/add" no-cache />
</template>

Events ​

None

Slots ​

None

CSS Variables ​

None

Standalone Installation ​

If you want to install the Icon component individually, you can use the @morpheme/icon package:

npm i @morpheme/icon

npm i @morpheme/icon

Then, you can use it in your Vue.js application like this:

<script setup lang="ts">
import VIcon from '@morpheme/icon';
</script>

<template>
  <VIcon name="ic:round-home" />
</template>

<script setup lang="ts">
import VIcon from '@morpheme/icon';
</script>

<template>
  <VIcon name="ic:round-home" />
</template>

Storybook ​

View Storybook documentation here.