iconslk

0.3.0 • Public • Published

Icons Libre Kiwi

Icon toolkit full CSS/SVG based on Font Awesome Free set.

Compare

Features

Font Awesome
6.5.x
Icons LK
0.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 Awesome
6.5.x
Icons LK
0.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.

Package Sidebar

Install

npm i iconslk

Weekly Downloads

9

Version

0.3.0

License

CC-BY-4.0 AND MIT

Unpacked Size

7.16 MB

Total Files

2539

Last publish

Collaborators

  • josephk-libre