Icons Libre Kiwi
Icon toolkit full CSS/SVG based on Font Awesome Free set.
Compare
Features
| Font Awesome 6.1.x |
Icons LK 0.2.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 Awesome 6.1.x |
Icons LK 0.2.x |
|||
|---|---|---|---|---|
| CSS + Webfont | 421,6kB (395,9kB min) |
4 files | — | |
| JS + SVG | 1,8MB (1,7MB min) | 1 files | — | |
| SVG Sprites | 1,7MB | 3 files | — | |
| CSS + SVG | — | 2,6MB (2,5MB 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.