Material design icons by Google for Vue.js & Nuxt.js (server side support & inline svg with path)
MIT License
This library should grant an easy-to-use interface to icons from Material Design.
Advantages of this module in comparing to fonts, svg sprites, etc.
This project could not have been possible without BrowserStack. ]
Simply install it using npm or yarn:
npm install --save md-svg-vue
or
yarn add md-svg-vue
Simply import the icon you wish to use to your vue project with the CommonJS syntax like in the following examples:
var MdClose = require('md-svg-vue/dist/action/MdClose');
// or
import MdClose from 'md-svg-vue/dist/action/MdClose';
Common structure of import paths:
import MdIcon from 'md-svg-vue/dist/<namespace>/<icon-name>.vue'
where
Then you need to import the icon to your Vue component:
props: {
// ...
},
components: {
MdClose,
MdBluetoothSearching,
MdAttachMoney
}
The naming syntax of these components is md-<kebab-cased-icon-name>
.
Example.vue:
<template>
<div>
<button @click="close()">
<md-close></md-close>
</button>
</div>
</template>
or
<template>
<div>
<button @click="close()">
<md-close class="your-class"></md-close>
</button>
</div>
</template>
or
<template>
<div class="bluetooth-searching">
<md-bluetooth-searching :width="16" :height="16"></md-bluetooth-searching>
<span>Searching...</span>
</div>
</template>
And after rendering the icon component you will see resulting html:
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon md-icon">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>