{#
  @file Adding icons to our website, without loading an icon library.

  To use this, you need to add this html to your template:
  {% include "@localgov_base/includes/icons/icon.html.twig" with {
      icon_name: 'facebook-square',
      icon_wrapper_element: 'div',
      icon_classes: 'service-landing-page__service-icon',
    }
  %}

  The only option above that is necessary is the 'icon_name' one. The others
  have sensible defaults.

  Icons default to a width of 1rem. To make them larger or smaller, just
  add the classes to the icon_classes variable. Note: this is a string, not
  an array. If you want to add more than one class, just include it in your
  string like so: icon_classes: 'class-1 class-2 class-3'.

  The widths we have available out of the box are:
    - lgd-icon--small
    - lgd-icon--smaller
    - lgd-icon--smallest
    - lgd-icon--large
    - lgd-icon--larger
    - lgd-icon--largest

  Each of these sizes corresponds to our var(--spacing-*) sizes.
#}

{% set icon_wrapper_element = icon_wrapper_element|default('div') %}

{% set attributes = create_attribute()
    .setAttribute('aria-hidden', decoration|default('true'))
    .addClass('lgd-icon')
    .addClass(icon_classes)
  %}

<{{ icon_wrapper_element }}{{ attributes }}>
  {% include "@localgov_microsites_base/includes/icons/" ~ icon_name ~ '.svg' %}
</{{ icon_wrapper_element }}>
