Skip to content
webpack based - load only what you need - svg inline icons
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev see changelog Oct 10, 2016
src see changelog Oct 10, 2016
test
.gitignore
.npmignore
README.md
karma.conf.coffee
package.json 2.0.0 Oct 10, 2016

README.md

DEPRECATED see cerijs and ceri-icon

vue-icons

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

comes with (and prefixes):

Demo

heavily inspired by vue-awesome.

Install

npm install --save-dev vue-icons callback-loader
// vue@1.0
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.

ERROR: Module build failed: SyntaxError: 'with' in strict mode

Currently buble is injecting strict mode in all processed js files. The down to ES5 compiled component contains with, which is forbidden in strict mode. Buble is used, for example, in rollup, which is used in laravel.

If you are running in this problem, make sure to exclude this component from processing with buble.

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.

You can’t perform that action at this time.