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

    bem-font-awesome-icons

    1.1.1 • Public • Published

    bem-font-awesome-icons

    Font Awesome icons extracted as SVG in BEM notation.

    Please refer to the list of icons with their names.

    Content

    The library provides two modifiers for each icon:

    • bg to use SVG as background image
    • glyph to use inline SVG via templates (BEMHTML or BH)
    icon/
        _bg/
            icon_bg_500px.css
            icon_bg_500px.svg
            icon_bg_address-book-o.css
            icon_bg_address-book-o.svg
            # and so on
        _glyph/
            icon_glyph_500px.bemhtml.js
            icon_glyph_500px.bh.js
            icon_glyph_address-book-o.bemhtml.js
            icon_glyph_address-book-o.bh.js
            # and so on
    

    Installation

    1. Add the library to project dependencies:

      npm i bem-font-awesome-icons --save
      
    2. Add it as redefinition level

    3. If you don't use bem-components with icon block please add icon.css with something like this:

    .icon {
        display: inline-block;
     
        text-align: center;
     
        background: 50% no-repeat;
    }
     
    /* Hack for correct baseline positioning */
    .icon:empty:after {
        visibility: hidden;
     
        content: '\00A0';
    }
     
    .icon > img,
    .icon > svg {
        margin: -5.15em 0 -5em; /* 0.15 — magic number, empirically found */
     
        vertical-align: middle;
    }

    You're done :)

    Usage

    BEMJSON

    { block: 'icon', mods: { bg: '500px' } }
    { block: 'icon', mods: { glyph: '500px' } }

    HTML

    <div class="icon icon_bg_500px"></div>

    Install

    npm i bem-font-awesome-icons

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar