@komposit/icons v2.0.8
@komposit/icons
Package exposing all the official SVG icons
About
This package extracts all Decathlon icons from the designers library (.sketch file).
Usage :
npm install @komposit/iconsAccording to your needs, your constraints and your browser support, you can :
- use the svg icons "as-is" in your project (inline use)
- generate a font-icon or an svg sprite
- use a pre-made sprite with all the icons
The configuration of your build tool / bundler is at your discretion. You can use Webpack, Rollup, Parcel, Gulp...
Guidelines and implementation overview : https://fvsch.com/svg-icons/
Inline use
Use inline (svg embedded in html) when rendering speed matters (e.g. icons at top of the page). Drawback : you will loose caching ☹️
Links : (principle) https://css-tricks.com/pretty-good-svg-icon-system/ (webpack-loader) https://webpack.js.org/loaders/svg-inline-loader/#root
SVG Sprite
Use svg sprites for icons sytems.
You can reference the sprite in HTML (use directive) or in CSS.
Prefer an external file (cacheable).
Links : (webpack plugin) https://github.com/JetBrains/svg-sprite-loader/ (node JS toolset, postCSS, etc.) https://github.com/JetBrains/svg-mixer
Premade sprite
Use premade sprite if your scope is corporate apps (not public facing) If you don't want the complexity involved with a webperf-focused build system.