Cms: Add any attributes with svg()

Created on 26 Jul 2019  路  1Comment  路  Source: craftcms/cms

Description

We can already add classes to SVGs with this function, but it would be great if we could add any attribute.

It would make it a lot easier to follow accessible SVG patterns, especially with #3937 and if there were some way to reference the title and/or desc elements added that way.

enhancement site development

Most helpful comment

Just added a new |attr filter for Craft 3.3, which will work on any HTML element, not just SVGs.

{{ svg('@webroot/icons/wave.svg')|attr({
    class: 'icon',
    role: 'img',
    'aria-labelledby': 'title  desc'
}) }}

It supports the same attribute definition as the attr() function added in 3.2 鈥撀爐hey both use Html::renderTagAttributes() behind the scenes.

Docs here: https://github.com/craftcms/cms/blob/3.3/docs/dev/filters.md#attr

>All comments

Just added a new |attr filter for Craft 3.3, which will work on any HTML element, not just SVGs.

{{ svg('@webroot/icons/wave.svg')|attr({
    class: 'icon',
    role: 'img',
    'aria-labelledby': 'title  desc'
}) }}

It supports the same attribute definition as the attr() function added in 3.2 鈥撀爐hey both use Html::renderTagAttributes() behind the scenes.

Docs here: https://github.com/craftcms/cms/blob/3.3/docs/dev/filters.md#attr

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timkelty picture timkelty  路  3Comments

brandonkelly picture brandonkelly  路  3Comments

darylknight picture darylknight  路  3Comments

angrybrad picture angrybrad  路  3Comments

RitterKnightCreative picture RitterKnightCreative  路  3Comments