Wednesday, 24 November, 2021 UTC

Material Design Svg Icons for Vue.js

Material Design Svg Icons for Vue.js

Summary

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).
📖 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
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

... more @ vuejsexamples.com

vuejsexamples.com