Provides SVG icons images, and classes with SVG background-images.
To use this you need to add @import "@economist/component-icon";
and @import "@economist/component-icon/backgrounds/ICONNAME.css";
to your postCSS.
Then, use the.icon .icon--ICONNAME
classes on any element.
By default, the background icons are black.
To use a color variation, add -COLORNAME
to the class name. For example, icon icon-facebook
would become icon icon-facebook-london
. If that color variation is not there (we don't want to add them all at once!), you need to change this project and publish it again with the new color there.
npm i -S @economist/component-icon
npm test
Have a look at color-variations.json. Then, run the compile-backgrounds script to update the backgrounds/*
file.
.svg exported from Sketch worked only after removing sketch:type="MSShapeGroup" attribute. Also, remember there should be no grouped elements in your asset.
(technical explanation)
It doesn't make the CSS heavier this way.
Gzip will deduplicate the color variation and the original, turning each variation into only a few more bytes than just the original. But only if they are close to each other. By forcing you to import both of them at the same time, I'm forcing them to be together in the output CSS file and thus save a lot of space!
This of course won't work if you encode the SVG in base64, so don't do it.