bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

bem-font-awesome-icons: второй подход к снаряду #1274

Open tadatuta opened 7 years ago

tadatuta commented 7 years ago

Буквально на днях мы анонсировали библиотечку bem-font-awersome, которая предоставляет возможность использовать Font Awesome с использованием БЭМ-нотации и без необходимости тянуть лишние стили.

На этот раз мы пошли дальше и распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.

Новую библиотеку назвали bem-font-awesome-icons. Она предоставляет иконки в виде модификаторов блока icon в двух вариантах: как фоновая картинка (модификатор bg) и инлайном через шаблоны BEMHTML и BH, чтобы иконки можно было стилизовать через CSS (через модификатор glyph).

Поставляется библиотека через npm или bower.

Подробности см. в документации: https://github.com/tadatuta/bem-font-awesome-icons

DjonyBastone commented 7 years ago

Круто!! спасибо ребята. В самый подходящий момент.

Недавно подключал сервис яндекса - поделиться ссылкой. Там код по методологии БЭМ. Обнаружил недостаток передачи иконки как background: url(...). При такой передаче svg, можно поменять только - фон, а на саму иконку (fill) повлиять не возможно. Было бы круто оставить возможность воздействия на все ингредиенты иконки. Если есть какие-нибудь мысли по этому поводу - пожалуйста поделитесь

Realetive commented 7 years ago

@DjonyBastone https://github.com/bem-site/bem-forum-content-ru/issues/1247

DjonyBastone commented 7 years ago

@Realetive Да, именно так - как и думал. Только в спрайты не заключил свои кастомные иконки, использую инлайн SVG для управления всеми стилями. Думал к поднакопить иконки и перед продакшн сделать спрайт.

Предыдущее сообщение в большей степени адресовано ребятам из Яндекс.Сервисов. Пожелание к сервисам - оставьте возможность получать svg инлайн !! пойду продублирую в блок "поделиться"

rtemision commented 7 years ago

Thanks, it's fucking awesome! :)