simple-vue-icon

simple-vue-icon

A simple icon component for Vue 3.

Installation

npm add simple-vue-icon

Usage

Import from vue-simple-icon to use the icon in your Vue components:

<script>
import { mdiArrowLeft } from '@mdi/js';
import VueIcon from 'simple-vue-icon';

export default {
  components: { VueIcon },
  setup() {
    return {
      mdiArrowLeft,
    };
  },
};
</script>

<template>
  <VueIcon :icon="mdiArrowLeft" />
</template>

or using <script setup> (recommended):

<script setup>
import { mdiArrowLeft } from '@mdi/js';
import VueIcon from 'simple-vue-icon';
</script>

<template>
  <vue-icon :icon="mdiArrowLeft" />
</template>

If you don't want to import the component manually, you can register it globally in your app's entrypoint:

import { createApp } from 'vue';
import App from './app.vue';
import VueIcon from 'simple-vue-icon';

const app = createApp(App);
app.use('VueIcon', VueIcon);
// ...

Props

icon (required)

The path string of the icon to render.

width/height (number or string; default: 24)

<vue-icon :icon="mdiArrowLeft" width="30" :height="30" />

size (number or string; default: 24)

Sets the width and the height of the icon

<!-- Equivalent to <vue-icon :icon="mdiArrowLeft" width="64" height="64" /> -->
<vue-icon :icon="mdiArrowLeft" size="64" />

Credits

Most of the code is forked from mdi-vue.