Index

Абстрактная иконка

{ block: 'b-icon' }

Блок b-icon создает контейнер для изображения.

Aтрибуты alt, url, width, height опциональны. То есть могут быть объявлены или необъявлены во входных данных.

BEMJSON блока:

{
	block: 'b-icon'
}

Выводит картинку (img) с однопиксельным прозрачным .gif и пустым атрибутом alt.

Использовать блок можно двумя способами:

  • через url
  • через модификатор

Использование блока через url

Задаем в атрибуте url свой путь к изображению, BEMJSON:

{
	block: 'b-icon',
	url: 'my-icon.png',
	alt: 'My icon'
}

Этот способ рекомендуется для добавления одиночных картинок.

Использование блока через добавление модификатора

Добавляем блоку модификатор, BEMJSON:

{
	block: 'b-icon',
	mods: { type: 'simple' },
	alt: 'My icon'
}

В CSS задаем размеры изображения и путь к нему:

.b-icon_type_simple
{
    width: 16px;
    height: 16px;

    background: url(icons-sprite.png) no-repeat -50px 0;
}

Этот способ рекомендуется при использовании спрайтов.

Примеры