ceri-icon
webpack based - load only what you need - svg inline icons.
See ceri-flag if you need a svg inline flag.
Features:
- plain JS - no dependencies
- 21kB unzipped - even smaller when using multiple ceri components
supports:
- (fa) Font Awesome
- (ma) Google Material Design Icons - spaces in icon names are replaced by
_
, e.g.material-done_all
. - (mdi) Material Design Icons
- (oc) Octicons
- (ic) Open Iconic
- (gly) Glyphicons
- (im) IcoMoon-free
- (ra) ratchicons - add
and
for android versionra-download
->ra-and-download
- (si) Simple Icons
If you need other free icon sets, let me know..
Demo
heavily inspired by vue-awesome.
Change in 0.2
- ceri-icon is now a webpack plugin instead of a loader.
See changed (easier) usage instruction below. - initial optimiziation of icons is way faster on multi-core machines.
Install
npm install --save-dev ceri-icon
Usage
-
webpack.config:
// webpack.config.jsIcons = ...moduleexports = ... plugins: ... "fa-heart""gly-heart" ... ...
- in your project
windowcustomElementsdefine"ceri-icon"require"ceri-icon"
For examples see dev/
.
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 |
size | Number | (font-size) | 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 |
Icon stack
offset-x
and offset-y
on nested ceri-icon
increase the size of the icon boundaries, so both will stay fully visible.
The parent ceri-icon
will be positioned in the center of the, then larger, boundaries.
Spinners
ceri-icon
comes without css, so no spinning included, you can do it manually by adding this css to your website.
/* css */@ 100% }
Development
Clone repository.
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.