Have ideas to improve npm?Join in the discussion! »

    @economist/component-icon

    5.19.0 • Public • Published

    By:EconomistBuild StatusBuild StatusCoverage Status

    Icon

    Provides SVG icons images, and classes with SVG background-images.

    Usage

    How to use the CSS backgrounds

    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.

    How to use the color variations?

    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.

    How to use inline icons?

    To inline icon to your HTML, import React component and use it in your code. Each icon is available by name as a single component and takes className as an argument.

    Icon does not have default styles.

    Example:

    import IconTwitter from '@economist/component-icon/lib/inline-icons/twitter';
     
    ...
     
    <IconTwitter className="myIcon" />
     

    Install

    npm i -S @economist/component-icon

    Run tests

    npm test

    FAQ

    I'm a developer. How do I add more colors?

    Have a look at color-variations.json. Then, run the compile-backgrounds script to update the backgrounds/* file.

    I'm a designer. How do I export a Sketch file to the icons properly?

    .svg exported from Sketch worked only after removing sketch:type="MSShapeGroup" attribute. Also, remember there should be no grouped elements in your asset.

    Why do I have to import the color variation from the same file as the original icon?

    (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.

    Keywords

    none

    Install

    npm i @economist/component-icon

    DownloadsWeekly Downloads

    84

    Version

    5.19.0

    License

    MIT

    Unpacked Size

    470 kB

    Total Files

    85

    Last publish

    Collaborators

    • avatar