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

Форум /

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

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

8 years ago

tadatuta

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

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

8 years ago

DjonyBastone

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

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

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

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

8 years ago

tadatuta

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

8 years ago

DjonyBastone

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

8 years ago

tadatuta

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

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

8 years ago

Realetive

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

8 years ago

DjonyBastone

Хмм...

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

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

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

8 years ago

tadatuta

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

8 years ago

DjonyBastone

@tadatuta

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

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

8 years ago

kompolom

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

Чтобы оставлять комментарии, необходимо авторизоваться.