Library to render Material Design Svg Icons in Vue.js
Here we use @mdi/js
as an example
yarn add @mdi/js @yeliulee/vue-mdi-svg
# OR
npm install @mdi/js @yeliulee/vue-mdi-svg
For better Tree Shaking Optimization, you have to import icons by your self
If you want to import all icons to your apps, please refer to mdi-vue
(Recommended to build your Vue.js App with Vite)
// main.[js|ts] According to your project
import Vue from 'vue';
import "@yeliulee/vue-mdi-svg/src/styles.css" // styles of icon component
import MdiSvg from "@yeliulee/vue-mdi-svg/v2"
import App from './App.vue';
Vue.use(MdiSvg);
// demo.vue
<template>
<div>
<MdiSvg> {{ mdiAccount }} </MdiSvg>
</div>
</template>
<script>
import { mdiAccount } from "@mdi/js"
export default {
data: () => ({
mdiAccount
})
}
</script>
// main.[js|ts] According to your project
import { createApp } from 'vue'
import "@yeliulee/vue-mdi-svg/src/styles.css"
import MdiSvg from "@yeliulee/vue-mdi-svg/v3" // or just "@yeliulee/vue-mdi-svg"
import App from './App.vue' // According to your code
const app = createApp(App)
app.use(MdiSvg)
// etc...
// demo.vue [same as vue2 without setup syntax]
<template>
<div>
<MdiSvg>{{ mdiWechat }} </MdiSvg>
</div>
</template>
<script setup lang="ts">
import { mdiWechat } from '@mdi/js'
</script>
both Nuxt.js 2 / 3 support Vue plugins, please read the corresponding documentation
The path of Svg, it won't work if slot is used
<template>
<div>
<MdiSvg :path="mdiReact" />
</div>
</template>
<script setup lang="ts">
import { mdiReact } from '@mdi/js'
</script>
The description of svg.
The width and height of the icon, it will work if no width
or height
is provided
<MdiSvg :size="48"> {{ your icon }} </MdiSvg>
<MdiSvg :width="16" :height="16"> {{ your icon }} </MdiSvg>
The width of the icon
The height of the icon
The viewbox of the svg icon
<MdiSvg :viewBox="'0 0 24 24'"> {{ your icon }} </MdiSvg>
Apply a spin/rotate animation to the icon
<MdiSvg spin> {{ your icon }} </MdiSvg>
<MdiSvg :spin="true"> {{ your icon }} </MdiSvg>
This libray is based on mdi-vue, thanks to @therufa and all mdi-vue's contributors