Material Design SVG Icons for Vue.js

View the Demo

Installation

# with npm
npm i @fullcrew/icon -S

# with yarn
yarn @fullcrew/icon -S

Usage

@vue/cli

// src/main.js
import Vue from 'vue'
import Icon from '@fullcrew/icon'

Vue.use(Icon)

nuxt.js

// plugins/icons.js

import Vue from 'vue'
import Icon from '@fullcrew/icon'

Vue.use(Icon)

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/icons'
  ]
}

~/components/my-component.vue

<template>
  <Icon name="mdiGithub" color="primary" size="medium" :rotate="45"/>
</template>

Props

Prop	PropTypes	Details
name	string	For example: mdiTwitter
size	string	medium, small, large
color	string	primary, danger, success
rotate	number	45, 90, 180

Note: Additional props will be applied to the <svg> element.

Styling

Applying a color, size and rotate attribute is usually the easiest solution. The example below demonstrates using SCSS to style the icons.

Example see style.scss

// For example <Icon name="mdiTwitter" color="twitter">
.icon.twitter {
  fill: #4099FF;
}

// For example <Icon name="mdiTwitter" size="big">
.icon.big {
  width: 1.5rem;
}

// For example <Icon name="mdiTwitter" :rotate="135">
.icon.rotate-18 {
  transform: rotate(135deg);
}