{#
    Shared icon component — renders a mask-based <span> for any SVG in
    assets/images/icons/. Color comes from CSS `color` (currentColor),
    size from --icon-size (default 20px, see components/_icon.scss).

    Params:
      - name (string, required) — icon file name without extension, e.g. 'trash'
      - class (string, optional) — extra CSS class(es), space-separated
      - size (string, optional) — square size override, e.g. '16px'
      - width / height (string, optional) — use instead of `size` for non-square icons (e.g. chevron-down)
#}
<span class="icon icon--{{ name }}{% if class is defined and class %} {{ class }}{% endif %}" style="--icon-url: url('{{ asset('build/images/icons/' ~ name ~ '.svg') }}');{% if size is defined and size %} --icon-size: {{ size }};{% endif %}{% if width is defined and width %} --icon-width: {{ width }};{% endif %}{% if height is defined and height %} --icon-height: {{ height }};{% endif %}" aria-hidden="true"></span>