Vue-Mdijs

Vue component wrapper for @mdi/js

Installation

If you're using Vue 3 click here

// NPM
npm i @mdi/js vue-mdijs

// Yarn
yarn add @mdi/js vue-mdijs

Usage

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>

With path prop

<template>
    <v-mdi :path="mdiMagnify"></v-mdi>
</template>
<script>
import { mdiMagnify } from '@mdi/js';

export default {
    setup() {
        return {
            mdiMagnify,
        };
    },
};
</script>

Props

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