A simple icon component for Vue 3.
npm add simple-vue-icon
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);
// ...
The path string of the icon to render.
<vue-icon :icon="mdiArrowLeft" width="30" :height="30" />
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" />
Most of the code is forked from mdi-vue.