Войти с помощью github
Форум /

Всем привет! Мне нравятся иконки Font Awesome, но не нравится подключать файлы расположенные на другом хосте, так же как и копировать все подряд. Это субъективное мнение, можно сказать личное предпочтение. Еще не всегда существуют в одной библиотеке все иконки которые нужны. Принято решение использовать кастомную накопительную библиотеку SVG-иконок. И конечно же использование по БЭМ-методологии. Хочу поделиться мыслями.

Реализация:

1) Каждая иконка является модификатором блока icon cтруктура папок:

    common.blocks/
        icon/
            _rub/
            _search/
            ...

2) На уровне common.blocks в папочках модификатора лежат файлики bemhtml.js, пример icon_rub.bemhtml.js:

block('icon')(
    mod('rub')(
        content()('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595 776"><defs><style>.icon_color{fill:#201600;fill-rule:evenodd;}</style></defs><title>rub_sign_1</title><path class="a" d="M573.39,118.92c-7.81-20.13-40.26-56.55-52.25-67.71-19.41-18.06-51.76-37.66-80.31-43.69C420.27,2.26,390,0,351.19,0L49.75,2V333.47H.5V440.09H49.75v39.67H.5V588.38H49.75V776H173.18V588.38H445.75V479.76H173.18V440.09H358c83.62-3.76,138.79-26.92,179.17-69.49,35.55-43.21,58.29-80.07,58.29-146.3,0-38.39-10.69-73.76-22.11-105.37ZM450.82,300.59h0c-21.69,24.84-38.48,26.91-91.63,32.88h-186v-226H357.47c35.4,0,57.94,8.26,70.5,12.77,20.52,10.86,26.19,18.07,33.1,25.91,14,23.1,22.84,40.18,22.84,71.79C480.5,266.5,471.37,276.5,450.82,300.59Z" transform="translate(-0.5)"/></svg>')
    )
);

3) На уровне desktop.blocks и пр. в папочках модификатора лежат стили icon_mods.post.css, пример icon_rub.post.css:

.icon_rub svg .icon_color
    fill #333
    stroke #333

.icon_rub svg
    margin 0
    height 21px

@media (--xlarge-only) {
    .icon_rub svg {
        height 19px
    }
}

@media (--large-only) {
    .icon_rub svg {
        height 15px
    }
}

со стилями цвета может перемудрил )))

4) В bundles файлике page.bemjson.js декларируется блок иконки:

{
    block : 'icon',
    mods : { rub : true }
}

Люди, хочется верить что схема идеальная, поправьте - если что не так.