Material Design Svg Icons for Vue.js

Library to render Material Design Svg Icons in Vue.js

Never mind the project name, you can actually use any monochrome svg icon(like Font Awesome Svg).

Setup

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

Example

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

For Vue 2

// main.[js|ts] According to your project
import Vue from 'vue';
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>

For Vue 3

// main.[js|ts] According to your project
import { createApp } from 'vue'
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>

Nuxt.js 2 / 3

both Nuxt.js 2 / 3 support Vue plugins, please read the corresponding documentation

Props

path(optional)

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>

title

The description of svg.

size(numeric or string; default: 24)

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>

width

The width of the icon

height

The height of the icon

viewBox

The viewbox of the svg icon

spin

Apply a spin/rotate animation to the icon

<MdiSvg spin> {{ your icon }} </MdiSvg>
<MdiSvg :spin="true"> {{ your icon }} </MdiSvg>

Credits

This libray is based on mdi-vue, thanks to @therufa and all mdi-vue‘s contributors

GitHub

View Github