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>
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
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>
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
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>
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