icon
Используется в качестве вспомогательного декоративного изображения в других блоках.
Обзор блока
Специализированные поля блока
Поле |
Тип |
Описание |
url |
String |
Адрес иконки. |
content |
BEMJSON , String |
Контент изображения в формате SVG. |
Описание блока
Используется в качестве вспомогательного декоративного изображения в других блоках.
Адаптирован для выравнивания по базовой линии строки.
Для создания самостоятельного изображения используйте блок image.
Пример добавления иконки с помощью модификатора. Для реализации используется служебный уровень test.blocks
библиотеки bem-components
.
Open in a new window<span class="icon icon_social_twitter"></span>
HTML{
block: 'icon',
mods: {
social: 'twitter'
}
}
BEMJSON[
{
block: 'icon',
mods: {
social: 'twitter'
}
}
]
deps
Open in a new window<button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="icon icon_action_download"></span><span class="button__text">Download</span></button>
HTML{
block: 'button',
text: 'Download',
mods: {
theme: 'islands',
size: 'm'
},
icon: {
block: 'icon',
mods: {
action: 'download'
}
}
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Специализированные поля блока
Поле url
Тип: String
.
Определяет адрес иконки.
Open in a new window<button class="button button_theme_islands button_size_m button_view_action button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="icon" style="background-image:url(https://img-fotki.yandex.ru/get/5405/259818507.0/0_130be5_948d59aa_S)"></span><span class="button__text">bem.info</span></button>
HTML{
block: 'button',
text: 'bem.info',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
},
icon: {
block: 'icon',
url: 'https://img-fotki.yandex.ru/get/5405/259818507.0/0_130be5_948d59aa_S'
}
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
}
}
]
deps
Поле content
Тип: BEMJSON
, String
.
Определяет контент изображения в формате SVG.
Open in a new window<span class="icon"><svg class="action_type_download" xmlns="..." width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg></span>
HTML{
block: 'icon',
content: {
tag: 'svg',
cls: 'action_type_download',
attrs: {
xmlns: '...',
width: 16,
height: 16
},
content: '<path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/>'
}
}
BEMJSONdeps
Open in a new window<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg></span>
HTML{
block: 'icon',
content: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
}
BEMJSONdeps