Использование кастомной библиотеки SVG-иконок (icon)

[DjonyBastone]

Всем привет! Мне нравятся иконки 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 }
}

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

[tadatuta]

В целом годно, но есть пара вопросов ко второму пункту:

1. Держать svg в коде шаблонов не очень удобно. Лучше складывать их туда в build time.
2. Далеко не всегда есть необходимость обращаться к иконкам через DOM, зато часто бывает нужно использовать иконки повторно. Если класть их фоном, то они будут грузиться один раз в стилях и кэшироваться, а в разметке придется грузить каждый раз. Т.е. здесь, в идеале, у пользователя должен быть выбор.

[DjonyBastone]

@tadatuta спасибо, и за табы отдельно - спасибо

Лучше складывать их туда в build time.

Этот вариант работает только если сборка происходит на сервере (runtime, v8)? Или все таки есть какой то хитрый способ для статичных html лежащих на хостинге?

Если есть, скажите куда смотреть, чем можно реализовать.

[tadatuta]

идея в том, чтобы в исходниках библиотеки SVG и шаблоны лежали отдельно, а в момент публикации версии — собирать их. Например, так работает публикация bem-components — мы предоставляем чистый CSS, хотя исходники написаны на PostCSS.

[DjonyBastone]

Идея понятна, но реализация в коде не понятна. Что должно содержаться в bundle page.bemjson.js ?

[tadatuta]

То же, что и в исходом варианте:

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

[Realetive]

Я бы ввёл дополнительный неймспейс для разных типов иконок. У себя использую icon_symbol_* для простых одноцветных, и отдельно — свои неймспейсы для групп цветных: icon_account_*, icon_social_* и т. д.

[DjonyBastone]

Хмм...

@tadatuta А что подразумевается в исходниках? В каком месте декларируется наличие ссылки на SVG ? в bemhtml, css, js или где? Реализация не понятна

К примеру на форуме результат иконки лежит в псевдоэлементе :before background-image: url(data:image/svg...);. Элемент имеет класс list__link[href*='twitter.com']:before

Не факт что он был задекларирован по Володиной схеме. Но это вопроса про внутренности не меняет.

[tadatuta]

например, в репозитории можно хранить только сами svg, а шаблоны и стили по ним генерировать скриптом

[DjonyBastone]

@tadatuta

а пример генерации стилей можешь привести?

Не могу допетрить как менять стили из bemjson, bemhtml или вообще через js

[kompolom]

Пользуясь случаем, скажу, что есть набор material иконок от google адаптированый под БЭМ проекты https://github.com/appwilio/bem-material-icons