Skip to content

Latest commit

 

History

History
95 lines (72 loc) · 1.99 KB

icon.en.md

File metadata and controls

95 lines (72 loc) · 1.99 KB

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.

{
    block : 'icon',
    mods : { social : 'twitter' }
}
{
    block : 'button',
    text : 'Download',
    mods : { theme : 'islands', size : 'm' },
    icon : {
        block : 'icon',
        mods : { action : 'download' }
    }
}

Custom fields of the block

url field

Type: String.

Specifies the address of the icon.

{
    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'
    }
}

content field

Type: BEMJSON, String.

Specifies image content in SVG format.

{
    block : 'icon',
    content : {
        tag : 'svg',
        cls : 'action_type_download',
        attrs : { xmlns: '...', width: 16, height: 16 },
        content : {
            html : '<path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/>'
        }
    }
}
{
    block : 'icon',
    content : {
        html : '<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>'
    }
}