Vuelify Vicons

Vite plugin for Vue that auto injects Icon components into your Vue 3 templates.

Install

npm install @vuelify/vite-plugin-vicons @iconify/json --save-dev

Initial Setup

// ./vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Icons from '@vuelify/vite-plugin-vicons';

export default defineConfig({
  plugins: [vue(), Icons()],
});

Usage

<template>
  <div>
    <!-- <vi-gg:yinyang /> will be auto injected -->
    <vi-gg:yinyang class="w-12 h-12" />
    <YinYang class="w-12 h-12" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// Manual importing is also supported
import YinYang from 'virtual:vicon/gg:yinyang';

export default defineComponent({
  components: {
    YinYang,
  },
});
</script>

<style></style>

Formatting IDs

// gg is the collection id whilst yinyang is the icon
import YinYang from 'virtual:vicon/gg:yinyang';

You can browse all off the Icons and their IDs at Icones

Special Thanks

This package is heavily inspired by vite-plugin-icons thanks for you work antfu who is also the creator of Icones

This packages heavily taps into the iconify eco system. The @iconify/json package is a peer dependency because it is updated everyday (it checks if there are anymore open source icons in the libraries). Make sure you update this package regularly if you want the newest icons in you website.

Features Coming Soon...

• dynamic icon component that doesn't need to be compiled at run time

Maintenance & Bugs

All @vuelify packages follow semantic versioning. There will be no breaking changes to the options the plugin accepts without major version upgrade. All the changes will happen under the hood.

I will be actively maintaining this package. If you'd like to help out with that, submit a pull request. If you find a bug, open an issue and I'll get to it ASAP.

This package only works with Vue 3 & I have no intention of adding another framework any time soon.

It was designed to work best within the world of @vuelify and with typescript.