vue-mdijs
v0.4.3
Published
Vue component wrapper for @mdi/js
Downloads
549
Readme
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
|