Vue component wrapper for @mdi/js
If you're using Vue 3 click here
// NPM
npm i @mdi/js vue-mdijs
// Yarn
yarn add @mdi/js vue-mdijs
main.js
import Vue from 'vue'
import VueMdijs from 'vue-mdijs'
import { mdiMagnify } from '@mdi/js'
VueMdijs.add({ mdiMagnify })
Vue.use(VueMdijs)app.vue
<template>
<div id="app">
<v-mdi name="mdi-magnify"></v-mdi>
<v-mdi name="mdi-magnify" fill="green"></v-mdi>
</div>
</template><template>
<v-mdi :path="mdiMagnify"></v-mdi>
</template>
<script>
import { mdiMagnify } from '@mdi/js';
export default {
setup() {
return {
mdiMagnify,
};
},
};
</script>| Name | Description | Type | Default | Accepted values |
|---|---|---|---|---|
name |
String | String |
null |
- |
size |
Icon size | String, Number |
24 |
- |
path |
Icon path | String |
null |
- |
title |
A11y SVG Title | String |
null |
- |
fill |
Color of icon | String |
currentColor |
rgb()/rgba()/#000 |
rotate |
Icon rotation | Number |
null |
0 to 360 |