Icons - AvIcon

✨ Introduction

The AvIcon component places an Icon (see Icon component from Iconify) in a square div of configurable size. It is a Vue.js component for displaying icons with a wide range of customization options, including animations, colors, and sizes. It's designed to be flexible and performant, with support for various display options, flip options, and accessible titles.

It has exactly the same API as OhVueIcon, and uses @iconify/vue under the hood.

WARNING

Icon names must be those from Iconify-vue.

🏗️ Structure

The icon is composed of a square div of configurable size containing the Icon component.

🏷️ Props

Name	Type	Default	Mandatory	Description
size	number	1		The size in rem of the icon.
name	string		✅	The name of the icon to display.
animation	'spin' | 'wrench' | 'pulse' | 'spin-pulse' | 'flash' | 'float' | 'ring'	undefined		Animation type applied to the icon.
speed	'fast' | 'slow'	undefined		Animation speed, if defined.
flip	'horizontal' | 'vertical' | 'both'	undefined		Flips the icon horizontally, vertically, or both.
label	string	undefined		ARIA label for accessibility.
title	number	undefined		Icon title (<title> tag), used for accessibility and tooltips.
color	string	undefined		Main color of the icon.
ssr	boolean	1		Enables server-side rendering.

🔊 Events

None.

🎨 Slots

None.

🚀 Storybook demos

You can find examples of use and demo of the component on its dedicated Storybook page.

💡 Examples of use

<template>
  <AvIcon
    name="mdi:warning-outline"
    color="var(--icon)"
    :size="2"
  />
</template>