iconslk v0.3.0
Icons Libre Kiwi
Icon toolkit full CSS/SVG based on Font Awesome Free set.
Compare
Features
| Font Awesome6.5.x | Icons LK0.3.x | Notes | |
|---|---|---|---|
| Relative sizing | ✔️ | ✔️ | xs, sm, lg, 1x,… 9x |
| Fixed-Width | ✔️ | ✔️ | |
| Icons in a List | ✔️ | ✔️ | + a lighter syntax that avoids wrapping the icon with a <span class="fa-li"/> |
| Rotation & flip | ✔️ | ✔️ | - IE support dropped |
| Animations | ✔️ | ✔️ | spin, pulse + grow, glow |
| Position utilities | ✔️ | ✔️ | pull + margin, block, flex |
| Color utilities | ✔️ | ✔️ | inverse + white (.fa-inverse = .lk-white) |
| Stacking | ✔️ | ✔️ | |
| Shaping | ✔️ | lighter than stacking | |
| Power transform | ✔️ | ||
| Masking icons | ✔️ | ||
| Layering, text & counter | ✔️ | ||
| Duotone icons | ✔️ | (✔️) | not tested ; basic use should work but coloring or changing opacity should not |
Syntax
The HTML syntax is the same as that of Font-Awesome except that it is not
necessary to add aria-hidden="true" for accessibility since screen readers
will not have any exotic unicode characters to read.
<i class="lks lk-{icon-file-name}"></i>You can see examples in test folder.
Files size
In Icons LK, icons can be picked to reduce the the final bundled size easily¹, in the table above we compare the default files (css, svg, js) needed to display every icons in the free Font Awesome set (brands, regular and solid)
| Font Awesome6.5.x | Icons LK0.3.x | |||
|---|---|---|---|---|
| CSS + Webfont | 440,1kB(401,9kB min) | 4 files | — | |
| JS + SVG | 1,6MB (1,5MB min) | 1 files | — | |
| SVG Sprites | 1,5MB | 3 files | — | |
| CSS + SVG | — | 1,9MB(1,9MB min) | 1 file |
¹ You just need to copy icons-custom.scss and main-custom.scss in your project
and then uncomment the line corresponding to the icon name in icons-custom.scss;
~ is a Webpack alias for node_modules folder, you may need to adapt to your environment.