simple-vue-icon
A simple icon component for Vue 3.
Installation
npm add simple-vue-iconUsage
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>
<vue-icon :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.