https://github.com/vue-comps/vue-icons
webpack based - load only what you need - svg inline icons
https://github.com/vue-comps/vue-icons
Last synced: 2 months ago
JSON representation
webpack based - load only what you need - svg inline icons
- Host: GitHub
- URL: https://github.com/vue-comps/vue-icons
- Owner: vue-comps
- Created: 2016-04-28T20:58:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-24T12:01:16.000Z (over 8 years ago)
- Last Synced: 2025-03-15T17:37:25.242Z (8 months ago)
- Language: CoffeeScript
- Size: 498 KB
- Stars: 77
- Watchers: 6
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-icons - load only what you need - svg inline icons - font compatible mode - fa, material, mdi and octicons (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Component Collections)
- awesome-vue-refactor - vue-icons ★10
- awesome-vuejs - vue-icons ★10 - load only what you need - svg inline icons - font compatible mode - fa, material, mdi and octicons (Awesome Vue.js / Component Collections)
README
# DEPRECATED see [cerijs](https://github.com/cerijs) and [ceri-icon](https://github.com/ceri-comps/ceri-icon)
# vue-icons
webpack based - load only what you need - svg inline icons.
comes with (and prefixes):
- [Font Awesome](https://fortawesome.github.io/Font-Awesome/icons/) - `fa`
- [Google Material Design Icons](https://design.google.com/icons/) - `material` - spaces in icon names are replaced by `_`, e.g. `material-done_all`.
- [Material Design Icons](https://materialdesignicons.com/) - `mdi`
- [Octicons](https://octicons.github.com/) - `octicon`
- [Open Iconic](https://useiconic.com/open#icons) - `iconic`
- [Glyphicons](http://getbootstrap.com/components/#glyphicons) - `glyphicon`
- [IcoMoon-free](https://icomoon.io/#preview-free) - `im`
- [ratchicons](http://goratchet.com/components/#ratchicons) - `ra` - add `and` for android version `ra-download` -> `ra-and-download`
### [Demo](https://vue-comps.github.io/vue-icons)
heavily inspired by [vue-awesome](https://github.com/Justineo/vue-awesome).
# Install
```sh
npm install --save-dev vue-icons callback-loader
// vue@1.0
npm install --save-dev vue-icons@1 callback-loader
```
## Usage
webpack.config:
```coffee
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:
```coffee
components:
"icon": require("vue-icons")
```
```html
```
see [`dev/`](https://github.com/vue-comps/vue-icons/tree/master/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](https://gitlab.com/Rich-Harris/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:
```coffee
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
//css
.spin {
animation: spin 1s 0s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
```html
```
### Icon stack
You can stack icons by using the plain icon and the stack icon component:
```coffee
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")
```
```html
```
`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.
```sh
npm install
npm run dev
```
Browse to `http://localhost:8080/`.
## License
Copyright (c) 2016 Paul Pflugradt
Licensed under the MIT license.