🎛️Icons

Ablepro Vuetify is pre-configured with the Svg Sprite

Iconsax

All Svg are taken from iconsax library

https://iconsax.io/

import SvgSprite from '@/components/shared/SvgSprite.vue';

// usage
<SvgSprite name="custom-home" style="width: 20px; height: 20px" />

If you want to add new svg then add svg file using symbol tag with unique id in sprite.svg

Material Design icons

Material icons svg using vuetify setup.

https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg

Make one different file for imports usable icons and use it.

MDI icon file: src/plugins/mdi-icon.ts

// if you want to use mdi new icon then add like this
import { mdiHome } from '@mdi/js';

export const icons = {
  home: mdiHome,
};
// Usage
<v-icon icon="$home"></v-icon> // Do not forgot to add $ syntax before icon name

Last updated