icon
Используется в качестве вспомогательного декоративного изображения в других блоках.
Обзор блока
Специализированные поля блока
| Поле |
Тип |
Описание |
| url |
String |
Адрес иконки. |
| content |
BEMJSON, String |
Контент изображения в формате SVG. |
Описание блока
Используется в качестве вспомогательного декоративного изображения в других блоках.
Адаптирован для выравнивания по базовой линии строки.
Для создания самостоятельного изображения используйте блок image.
Пример добавления иконки с помощью модификатора. Для реализации используется служебный уровень test.blocks библиотеки bem-components.
Open in a new window<span class="icon icon_social_twitter"></span>
{
block: 'icon',
mods: {
social: 'twitter'
}
}
[
{
block: 'icon',
mods: {
social: 'twitter'
}
}
]
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>
{
block: 'button',
text: 'Download',
mods: {
theme: 'islands',
size: 'm'
},
icon: {
block: 'icon',
mods: {
action: 'download'
}
}
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Специализированные поля блока
Поле 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>
{
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'
}
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
}
}
]
Поле 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>
{
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"/>'
}
}
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>
{
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>'
}