vue-icons

webpack based - load only what you need - svg inline icons.

comes with (and prefixes):

• Font Awesome - fa
• Google Material Design Icons - material
• Material Design Icons - mdi
• Octicons - octicon
• Open Iconic - iconic

Glyphicons are currently broken svgfont2js#1.

Demo

heavily inspired by vue-awesome.

Install

npm install --save-dev vue-icons callback-loader

Usage

webpack.config:

module:
  loaders: [
    # your loaders
  ]
  postLoaders: [
    { test: /vue-icons/, loader: "callback-loader"}
  ]
callbackLoader:
  require("vue-icons/icon-loader")(["fa-thumbs-up"]) # add all the icons you need

in your component:

components:
  "icon": require("vue-icons")

<icon name="fa-thumbs-up"></icon>

see dev/ for examples.

This will load a font-compatible version of the component. The height of the icon will be set to font-size and margin-top will be set so it will fit in the middle of line-height.

Props

Name	type	default	description
name	String	-	(required) name of the icon
flip	String	-	v for vertical and h for horizontal flipping
label	String	-	aria-label

Plain icon

if you don't need the font-compatibility you can also use the plain icon component:

components:
  "icon": require("vue-icons/icon")

This has two additional props:

Name	type	default	description
size	String	16	height of the icon in px
scale	Number	1	size multiplier
hcenter	Boolean	false	sets margin-top so that the icon will be centered in the parent element

Spinners

comes without css, so no spinning included, you can do it manually like this:

//css
.spin {
  animation: spin 1s 0s infinite linear;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<icon name="fa-spinner" class="spin"></icon>

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.