1.1.0 • Published 2 years ago
@yeliulee/vue-mdi-svg v1.1.0
Material Design Svg Icons for Vue.js
Library to render Material Design Svg Icons in Vue.js
:book: 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