Material Design Svg Icons for Vue.js

Library to render Material Design Svg Icons in Vue.js

📖 Doc for Simplified Chinese

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

(Recommended to build your Vue.js App with Vite)

For Vue 2

// 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>

For Vue 3

// 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>

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

<MdiSvg :viewBox="'0 0 24 24'"> {{ your icon }} </MdiSvg>

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