webpack based - load only what you need - svg inline icons.
See ceri-flag if you need a svg inline flag.
Features:
supports:
_
, e.g. material-done_all
.and
for android version ra-download
-> ra-and-download
If you need other free icon sets, let me know..
heavily inspired by vue-awesome.
npm install --save-dev ceri-icon
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/
.
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 |
<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.
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>
Clone repository.
npm install
npm run dev
Browse to http://localhost:8080/
.
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.