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 version ra-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

general ceri component usage instructions

webpack.config:

// webpack.config.js
Icons = require("ceri-icon")
...
module.exports = {
...
plugins:[
...
new Icons(["fa-heart","gly-heart"])
...
]
...
}

in your project

window.customElements.define("ceri-icon", require("ceri-icon"))

<ceri-icon name="fa-heart"></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

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

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 */
.spin {
  animation: spin 1s 0s infinite linear;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<ceri-icon name="fa-spinner" class="spin"></ceri-icon>

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

ceri-comps / ceri-icon

readme