Material design icons for vue.js
Branch: master
Clone or download
therufa Merge pull request #10 from therufa/refactor/6-move-to-render-function
refactor(template): replace template with render function
Latest commit 695d9dc Oct 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example @ 1069e6f
mdi @ 03f96bd chore: update MDI dependencies Oct 6, 2018
.babelrc feat(): add babel config and es plugins May 19, 2017
.gitignore chore(): update MDI icon repository Jul 15, 2017
.gitmodules Update .gitmodules Jul 15, 2017
.npmignore fix(npm): fixed npm publish script May 19, 2017
CHANGELOG.md chore(release): 0.2.14 Apr 3, 2018
LICENSE fix(LICENSE): correct name Jul 15, 2017
MDI-LICENSE Update MDI-LICENSE May 17, 2017
README.md chore(): add documentation to readme Jul 15, 2017
build.js refactor(template): replace template with render function Oct 6, 2018
build.tpl refactor(template): replace template with render function Oct 6, 2018
package.json refactor(template): replace template with render function Oct 6, 2018
yarn.lock refactor(template): replace template with render function Oct 6, 2018

README.md

Material Design Icons for Vue.js

This library should grant an easy-to-use interface to icons from MDI.
Import only those icons you need, does not require further configuration. Install it and use it without bloating your source code.

Enjoy!

How to use

Simply install it using npm or yarn:

npm install --save mdi-vue
yarn add mdi-vue

Import and usage

Simply import the icon you wish to use to yout vue project with the CommonJS syntax like in the following examples:

require('mdi-vue/HotelIcon');

import 'mdi-vue/CommentAlertIcon';

Note here, that the icons are automatically registered as components to Vuejs, so you can use the freshly imported icons within your templates as any other component. The naming syntax of these components is always mdi-<kebab-cased-icon-name>-icon.

Example.vue:

<template>
  <div>
    My hand is a <mdi-hook-icon />
  </div>
</template>

<script>
  import 'mdi-vue/HookIcon'
</script>

Custom icon names

If you don't like the generated names, you can bind the icons manually to the vue instance as in this example:

CustomIconName.vue:

<template>
  <div>
    I am <custom-icon-name />. Pleased to meet you
  </div>
</template>

<script>
  import CustomIconName from 'mdi-vue/EmoticonHappyIcon'

  export default {
    component: {
      CustomIconName,
    },
  }
</script>

Note that the icons still get imported by their original names too.

Example

const Vue = require('vue')
const HumanIcon = require('mdi-vue/HumanIcon')

new Vue({
  el: '#some-html-element',
  template: '<span><mdi-human-icon /></span>'
})

Heavily inspired by mdi-react.

Used resources