bootstrap_italia-8.x-0.x-dev/components/components-2/icon/icon.html.twig

{#
/**
 * @file
 * Template for icon component
 * Docs: https://italia.github.io/bootstrap-italia/docs/utilities/icone/
 * Latest revision: v2.11.2
 *
 * Parameters:
 * - name (string) (default: 'it-warning-circle')
 *   - see: https://italia.github.io/bootstrap-italia/docs/utilities/icone/#lista-delle-icone-disponibili
 * - size (string) (default: '')
 *   - options ["xs", "sm", "lg", "xl"]
 * - color (string) (default: '')
 *   - options ["primary", "secondary", "success", "warning", "danger", "light", "white"]
 * - dark (boolean) (default: false)
 *   - Enable dark background
 * - light (boolean) (default: false)
 *   - Enable light background
 * - padded (boolean) (default: false)
 *   - Enable padded feature
 * - alignment (string) (default: '')
 *   - options ["bottom", "middle", "top"]
 * - library (string) (default: 'sprites.svg')
 *   - Your custom library
 * - icon_path (string) (default: '')
 *   - Your custom path icons library
 * - icon_title (string) (default: '')
 *   - Icon title. It sets automatically icon_decorative to false.
 * - icon_decorative (boolean) (default: true)
 *   - If set to TRUE it automatically adds accessibility attributes to indicate that it is a decorative element
 * - icon_classes (array) (default: '')
 * - icon_attributes (obj attribute) (default: '')
 *   - Object with extra attributes
 * - merge_classes_reverse (boolean) (default: false)
 *   - Merge first icon_classes
 *
 * Note: only first parameter is mandatory.
 * You can set this component in two main ways:
 *   - Set all parameters
 *     [ name: 'it-x', icon_classes: ['customClass'], size: 'xs', color: 'primary', dark: false, light: false, padded: true, alignment: 'middle' ]
 *   - Set parameters in icon_classes array, however you must use class names correctly
 *     [ name: 'it-x', icon_classes: ['customClass', 'icon-xs', 'icon-primary', 'bg-light', 'icon-padded', 'align-middle'] ]
 *
 * Examples:
 *
   {% include '@bi-bcl/icon/icon.html.twig' with {
     name: 'it-tool',
     size: 'lg',
     color: 'primary',
   } %}
 *
   {% include '@bi-bcl/icon/icon.html.twig' with {
     name: 'it-tool',
     icon_classes: ['icon-lg', 'icon-primary'],
   } %}
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _name = name|default('it-warning-circle') %}
  {% set _size = size|default('') %}
  {% set _color = color|default('') %}
  {% set _dark = dark ?? false %}
  {% set _light = light ?? false %}
  {% set _padded = padded ?? false %}
  {% set _alignment = alignment|default('') %}
  {% set _library = library|default('sprites.svg') %}
  {% set _icon_path = icon_path|default('') %}
  {% set _icon_title = icon_title|default('') %}
  {% set _icon_decorative = icon_decorative ?? true %}
  {% set _icon_classes = icon_classes|default('') %}
  {% set _icon_attributes = icon_attributes|default('') %}
  {% set _merge_classes_reverse = merge_classes_reverse ?? false %}

  {# Set options #}
  {% set _classes = [
      'icon',
      _size ? 'icon-' ~ _size,
      _color ? 'icon-' ~ _color,
      _dark ? 'bg-dark',
      _light ? 'bg-light',
      _padded ? 'icon-padded',
      _alignment ? 'align-' ~ _alignment,
    ]
  %}

  {% if _icon_classes is not empty and not _merge_classes_reverse %}
    {% set _classes = _classes|merge(icon_classes) %}
  {% endif %}

  {% if _icon_classes is not empty and _merge_classes_reverse %}
    {% set _classes = icon_classes|merge(_classes) %}
  {% endif %}

  {% if _icon_attributes is empty %}
    {% set icon_attributes = create_attribute() %}
  {% endif %}
  {% set icon_attributes = icon_attributes
    .addClass(_classes)
  %}

  {% if _icon_title is not empty %}
    {% set icon_attributes = icon_attributes
      .setAttribute('role', 'img')
    %}
    {% set _icon_decorative = false %}
  {% endif %}

  {% if _icon_decorative %}
    {% set icon_attributes = icon_attributes
      .setAttribute('role', 'img')
      .setAttribute('aria-hidden', 'true')
    %}
  {% endif %}

  {% if _icon_path is empty and libraries_cdn_icons is empty %}
    {% set _icon_path = "/" ~ active_theme_path() ~ "/dist/svg/" ~ _library ~ "#" ~ _name %}
  {% elseif _icon_path is empty and libraries_cdn_icons is not empty %}
    {% set _icon_path = libraries_cdn_icons ~ "#" ~ _name %}
  {% else %}
    {% set _icon_path = _icon_path ~ "#" ~ _name %}
  {% endif %}

  {# Component #}
  <svg{{ icon_attributes }}>
    {% if _icon_title is not empty  %}
      <title>{{ _icon_title }}</title>
    {% endif %}
    <use href="{{ _icon_path }}" xlink:href="{{ _icon_path }}"></use>
  </svg>
{% endapply %}