icon

When including the icon, set the size to be its mobile size (mobile first). Different sizes for larger screens will be set in the css file of the including component.

Information

Folder: src/components/elements/icon

Files

Schema

// src/components/elements/icon/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/icon
additionalProperties: false
type: object
properties:
  name:
    type: string
  sprite_sheet:
    type: string
    default: icon
  classes:
    type: array
    items:
      type: string
  label:
    type: string
required:
  - name

Mocks

// src/components/elements/icon/mocks.yaml

$variants:
  - $name: Chevron
    name: chevron
  - $name: Close
    name: close
  - $name: Menu
    name: menu
  - $name: Search
    name: search

Template

// src/components/elements/icon/icon.twig

{%- if label is defined -%}
	{%- set random = random() -%}
{%- endif -%}
<svg
	xmlns="http://www.w3.org/2000/svg"
	class="Icon Icon--{{ name }} {{ classes|join(" ") }}"
	focusable="false"
	role="img"
	{%- if not label %} aria-hidden="true"{% else %} aria-labelledby="Icon--{{ name }}-{{ random }}"{% endif -%}>
	{%- if label is defined -%}<title id="Icon--{{ name }}-{{ random }}">{{ label }}</title>{% endif -%}
	<use
		xmlns:xlink="http://www.w3.org/1999/xlink"
		xlink:href="{{ asset_path() }}/svg/{{ sprite_sheet|default("icons") }}.sprite.svg#{{ name }}"
	>
	</use>
</svg>

Variants

Chevron

Open