icon
Use this block for creating an auxiliary graphical element in other blocks.
Overview
Custom fields of the block
| Field |
Type |
Description |
| url |
String |
The address of the icon. |
| content |
BEMJSON, String |
Icon content in SVG format. |
Block description
Use the icon block to create the auxiliary graphical element in other blocks.
The block is adapted to align with the baseline.
To create an independent image, use the image block.
The icon block could be declared through specific modifiers. For the examples below we implement modifiers on the service level called test.blocks of bem-components library.
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'
}
}
]
Custom fields of the block
url field
Type: String.
Specifies the address of the icon.
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 field
Type: BEMJSON, String.
Specifies image content in SVG format.
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>'
}