cerijs and ceri-icon
DEPRECATED seevue-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
- addand
for android versionra-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.
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
changedocticons
processing to take the direct svg icons instead of the font -
1.2.0
changed flip interface
fixedglyphicons
removeddisplay:inline-block
from default style.
Updatedocticons
- 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.