icon

// 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
  size:
    type: string
    enum:
      - small
      - medium
      - large
required:
  - name

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

$variants:
  - $name: Admin
    name: admin
  - $name: Arrow back
    name: arrow_back
  - $name: Arrow forward
    name: arrow_forward
  - $name: Arrow up
    name: arrow_up
  - $name: Audio
    name: audio
  - $name: Bulletpoint
    name: bulletpoint
  - $name: Check
    name: check
  - $name: Check circle
    name: check_circle
  - $name: Check circle filled
    name: check_circle_filled
  - $name: Chevron down
    name: chevron_down
  - $name: Chevron left
    name: chevron_left
  - $name: Chevron right
    name: chevron_right
  - $name: Chevron up
    name: chevron_up
  - $name: Circle
    name: circle
  - $name: Circle filled
    name: circle_filled
  - $name: Circle warning
    name: circle_warning
  - $name: Close
    name: close
  - $name: Cloud
    name: cloud
  - $name: Delete
    name: delete
  - $name: Delete filled
    name: delete_filled
  - $name: Divider
    name: divider
  - $name: Edit
    name: edit
  - $name: Email
    name: email
  - $name: Error
    name: error
  - $name: Error circle
    name: error_circle
  - $name: Error circle filled
    name: error_circle_filled
  - $name: Facebook
    name: facebook
  - $name: Handbook
    name: handbook
  - $name: Info
    name: info
  - $name: Instagram
    name: instagram
  - $name: Job
    name: job
  - $name: LinkedIn
    name: linkedin
  - $name: Login
    name: login
  - $name: Menu
    name: menu
  - $name: Muted
    name: muted
  - $name: Note
    name: note
  - $name: Notes
    name: notes
  - $name: Pause
    name: pause
  - $name: Phone
    name: phone
  - $name: Pin
    name: pin
  - $name: Pinterest
    name: pinterest
  - $name: Play
    name: play
  - $name: Replay
    name: replay
  - $name: Search
    name: search
  - $name: Settings
    name: settings
  - $name: Switch off
    name: switch_off
  - $name: Switch on
    name: switch_on
  - $name: Switch pending
    name: switch_pending
  - $name: Upload
    name: upload
  - $name: User
    name: user
  - $name: User create
    name: user_create
  - $name: Warning
    name: warning
  - $name: X
    name: x
  - $name: YouTube
    name: youtube

// 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(" ") }} Icon--{{ size|default("medium") }}"
	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>