Icon

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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/icon
properties:
  name:
    type: string
  class:
    type: string
  label:
    type: string
required:
  - name

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

$variants:
  - $name: arrow
    name: arrow
  - $name: at-sign
    name: at-sign
  - $name: calendar
    name: calendar
  - $name: check
    name: check
  - $name: checkbox-checked
    name: checkbox-checked
  - $name: checkbox-empty
    name: checkbox-empty
  - $name: chevron
    name: chevron
  - $name: clock
    name: clock
  - $name: credit-card
    name: credit-card
  - $name: cross
    name: cross
  - $name: download
    name: download
  - $name: edit
    name: edit
  - $name: external-link
    name: external-link
  - $name: facebook
    name: facebook
  - $name: file
    name: file
  - $name: filter
    name: filter
  - $name: flag
    name: flag
  - $name: gift
    name: gift
  - $name: heart
    name: heart
  - $name: home
    name: home
  - $name: info
    name: info
  - $name: lock
    name: lock
  - $name: logo
    name: logo
  - $name: mail
    name: mail
  - $name: map-pin
    name: map-pin
  - $name: maximize
    name: maximize
  - $name: menu
    name: menu
  - $name: minus
    name: minus
  - $name: more
    name: more
  - $name: phone
    name: phone
  - $name: play
    name: play
  - $name: printer
    name: printer
  - $name: search
    name: search
  - $name: share
    name: share
  - $name: shield
    name: shield
  - $name: shopping-bag
    name: shopping-bag
  - $name: twitter
    name: twitter
  - $name: whatsapp
    name: whatsapp
  - $name: user
    name: user

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

<svg class="Icon Icon--{{ name }} {{ class }}" focusable="false"{% if not label %} aria-hidden="true"{% endif %}>
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ asset_path() }}svgs/icons.sprite.svg#{{ name }}" {% if label is defined %} aria-label="{{ label }}" {% endif %}></use>
</svg>