# Icons Libre Kiwi

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

## Compare
### Features

  |                    | Font Awesome<br/>6.5.x  | Icons LK<br/>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<br/>6.5.x  || Icons LK<br/>0.3.x ||
  | -- | -- | -- | -- | -- |
  | CSS + Webfont | 440,1kB<br/>(401,9kB min) | 4 files | — ||
  | JS + SVG      | 1,6MB (1,5MB min) | 1 files | — ||
  | SVG Sprites   | 1,5MB | 3 files | — ||
  | CSS + SVG     | — || 1,9MB<br/>(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.