vue-icons

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

comes with (and prefixes):

• Font Awesome - fa
• Google Material Design Icons - material - spaces in icon names are replaced by _, e.g. material-done_all.
• Material Design Icons - mdi
• Octicons - octicon
• Open Iconic - iconic
• Glyphicons - glyphicon
• IcoMoon-free - im
• ratchicons - ra - add and for android version ra-download -> ra-and-download

Demo

heavily inspired by vue-awesome.

Install

npm install --save-dev vue-icons callback-loader
// [email protected]
npm install --save-dev vue-icons@1 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 as svg render as inline item, it will fit in the middle of line-height and responds to vertical-align similar as normal glyphs.

Props

Name | type | default | description ---:| --- | ---| --- name | String | - | (required) name of the icon flip-v | String | - | apply vertical flipping flip-h | String | - | apply horizontal flipping offset-x | Number | 0 | move the icon left/right within its borders in percentage (relative to the center) offset-y | Number | 0 | move the icon up/down within its borders in percentage (relative to the center) label | String | name | 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 three additional props:

Name | type | default | description ---:| --- | ---| --- size | Number | 16 | height of the icon in px scale | Number | 1 | size multiplier hcenter | Boolean | false | sets the height to equal the parentElement and moves the icon to the center

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>

Icon stack

You can stack icons by using the plain icon and the stack icon component:

components:
  "icon": require("vue-icons/icon") # this won't work with the font-compatible version (require("vue-icons"))
  "icon-stack": require("vue-icons/icon-stack")

<icon name="fa-camera">
  <icon-stack name="fa-ban" style="color:red" scale=2></icon-stack>
</icon>

offset-x and offset-y on icon-stack increase the size of the icon boundaries, so both will stay fully visible. The normal icon will be positioned in the center of the, then larger, boundaries.

Changelog

• 2.0.0
  added vue 2.0.0 compatibility

• 1.4.2
  added error messages

• 1.4.1
  added ratchicons

• 1.4.0
  changed positioning again (icon-font-compatible with line-height)

• 1.3.0
  added icon stack
  added icomoon - im
  changed octicons processing to take the direct svg icons instead of the font

• 1.2.0
  changed flip interface
  fixed glyphicons
  removed display:inline-block from default style.
  Updated octicons - they changed their icon font.

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

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