{#
/**
 * @file
 * Icon Image component
 * Use `<img>` instead of injecting the SVG file.
 *
 * @param string  $name           The file name of the icon.
 * @param boolean $ignore_missing Avoid empty <img> printing
 * @param array   $attr           Custom attributes.
 * @param array   $css_vars       Custom CSS variables to pass to the SVG.
 * @param string  $current_color  Custom color for the `currentColor` CSS variable in the SVG.
 */
#}
{%- set svg -%}
  {% if ':' in name %}
    {{ meta_icon(name) }}
  {% else %}
    {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
  {% endif %}
{%- endset -%}

{% if svg is not empty or not ignore_missing %}
  {% if current_color is defined or css_vars is defined %}
    {%- set style -%}
      <style>
        :root {
          {% if current_color is defined %}
            color: {{ current_color }};
          {% endif %}
          {% if css_vars is defined %}
            {% for var, value in css_vars %}
              --{{ var }}: {{ value }};
            {% endfor %}
          {% endif %}
        }
      </style>
    {%- endset -%}

    {% set svg = svg|replace({ '</svg>': '%s</svg>'|format(style) }) %}
  {% endif %}

  {% if not 'xmlns="http://www.w3.org/2000/svg"' in svg %}
    {% set svg = svg|replace({ '<svg': '<svg %s'|format('xmlns="http://www.w3.org/2000/svg"') }) %}
  {% endif %}

  {% set attributes = merge_html_attributes(
    attr ?? null,
    {
      width: '',
      height: '',
      alt: ' ',
      aria_hidden: 'true'
    },
    {
      src: svg ? 'data:image/svg+xml,%s'|format(svg|url_encode) : '',
      class: [
        'icon-img',
        'icon-img--%s'|format(name),
      ],
    }
  ) %}

  <img {{ html_attributes(attributes) }}>
{% endif %}