larva components: `c-icon`

Available Variants

full prototype

c-icon README

This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.

c-icon Twig The markup file.

{% if c_icon_url %}
<a class="{{ c_icon_link_classes }}" href="{{ c_icon_url }}"
	{% if c_icon_rel_name %}
		rel="{{ c_icon_rel_name }}"
	{% endif %}
	{% if c_icon_target_attr %}
		target="{{ c_icon_target_attr }}"
	{% endif %}
>
	<span class="lrv-a-screen-reader-only">{{ c_icon_link_screen_reader_text }}</span>
{% endif %}

{% if c_icon_screen_reader_text %}
	{% if c_icon_screen_reader_tag_text %}
	<{{ c_icon_screen_reader_tag_text }} class="lrv-a-screen-reader-only" title="{{ c_icon_screen_reader_title_attr }}">{{ c_icon_screen_reader_text }}</{{ c_icon_screen_reader_tag_text }}>
	{% else %}
	<span class="lrv-a-screen-reader-only" title="{{ c_icon_screen_reader_title_attr }}">{{ c_icon_screen_reader_text }}</span>
	{% endif %}
{% endif %}

<svg class="c-icon {{ modifier_class }} {{ c_icon_classes }}"
	{% if c_icon_screen_reader_text %}
		aria-hidden="true"
	{% endif %}
>
	<use xlink:href="#{{ c_icon_name }}" />
	{% if c_icon_secondary_name %}
		<use xlink:href="#{{ c_icon_secondary_name }}" />
	{% endif %}
</svg>

{% if c_icon_url %}
</a>
{% endif %}

c-icon JSON The data object for this pattern.

{
	"c_icon_link_classes": "",
	"c_icon_name": "byline-plus",
	"c_icon_target_attr": "_blank",
	"c_icon_link_screen_reader_text": "Icon Link",
	"c_icon_url": false,
	"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
	"c_icon_rel_name": "noopener noreferrer",
	"c_icon_screen_reader_tag_text": "",
	"c_icon_screen_reader_text": "Plus Icon",
	"c_icon_screen_reader_title_attr": "Plus Icon"
}