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

{#
/**
 * @file
 * List all icon for demo.
 * github://italia/bootstrap-italia/_data/icons.yml
 *
 * Example:
 *
   {% include '@bi-bcl/icon/icons-list.html.twig' %}
 */
#}
{% apply spaceless %}
  {% set icons = [
    'it-arrow-down', 'it-arrow-down-circle', 'it-arrow-down-triangle',
    'it-arrow-left', 'it-arrow-left-circle', 'it-arrow-left-triangle',
    'it-arrow-right', 'it-arrow-right-circle', 'it-arrow-right-triangle',
    'it-arrow-up', 'it-arrow-up-circle', 'it-arrow-up-triangle',
    'it-ban', 'it-bookmark', 'it-box',
    'it-burger', 'it-calendar', 'it-camera',
    'it-card', 'it-chart-line', 'it-check',
    'it-check-circle', 'it-chevron-left', 'it-chevron-right',
    'it-clip', 'it-clock', 'it-close',
    'it-close-big', 'it-close-circle', 'it-code-circle',
    'it-collapse', 'it-comment', 'it-copy',
    'it-delete', 'it-download', 'it-error',
    'it-exchange-circle', 'it-expand', 'it-external-link',
    'it-flag',
    'it-folder', 'it-fullscreen', 'it-funnel',
    'it-hearing', 'it-help', 'it-help-circle',
    'it-horn', 'it-inbox', 'it-info-circle',
    'it-key', 'it-link', 'it-list',
    'it-locked', 'it-logout', 'it-mail', 'it-mail-open', 'it-map-marker',
    'it-map-marker-circle', 'it-map-marker-minus', 'it-map-marker-plus',
    'it-maximize', 'it-maximize-alt', 'it-minimize',
    'it-minus', 'it-minus-circle', 'it-more-actions',
    'it-more-items', 'it-note', 'it-open-source',
    'it-pa', 'it-password-invisible', 'it-password-visible',
    'it-pencil', 'it-piattaforme', 'it-pin',
    'it-plug', 'it-plus', 'it-plus-circle',
    'it-presentation', 'it-print', 'it-refresh',
    'it-restore', 'it-rss', 'it-rss-square',
    'it-search', 'it-settings', 'it-share',
    'it-software', 'it-star-full', 'it-star-outline',
    'it-telephone', 'it-tool', 'it-unlocked',
    'it-upload', 'it-user', 'it-video',
    'it-warning', 'it-warning-circle', 'it-wifi', 'it-zoom-in',
    'it-zoom-out',
  ] %}
  {% set icons_platforms = [
    'it-android', 'it-android-square',
    'it-apple', 'it-apple-square',
    'it-behance',
    'it-facebook', 'it-facebook-square',
    'it-figma', 'it-figma-square',
    'it-flickr', 'it-flickr-square',
    'it-github',
    'it-instagram',
    'it-linkedin', 'it-linkedin-square',
    'it-medium', 'it-medium-square',
    'it-mastodon', 'it-mastodon-square',
    'it-moodle', 'it-moodle-square',
    'it-pinterest', 'it-pinterest-square',
    'it-quora', 'it-quora-square',
    'it-reddit', 'it-reddit-square',
    'it-slack', 'it-slack-square',
    'it-snapchat', 'it-snapchat-square',
    'it-stackexchange', 'it-stackexchange-square',
    'it-stackoverflow', 'it-stackoverflow-square',
    'it-telegram',
    'it-threads', 'it-threads-square',
    'it-tiktok', 'it-tiktok-square',
    'it-twitter', 'it-twitter-square',
    'it-vimeo', 'it-vimeo-square',
    'it-whatsapp', 'it-whatsapp-square',
    'it-youtube',
    'it-google',
  ] %}
  {% set icons_extra = [
    'it-designers-italia', 'it-team-digitale'
  ] %}
  {% set icons_files = [
    'it-file',
    'it-files',
    'it-file-audio',
    'it-file-compressed',
    'it-file-csv',
    'it-file-json',
    'it-file-odp',
    'it-file-ods',
    'it-file-odt',
    'it-file-pdf',
    'it-file-pdf-ext',
    'it-file-ppt',
    'it-file-sheet',
    'it-file-slides',
    'it-file-txt',
    'it-file-video',
    'it-file-xml',
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Icons list'|t,
    path_demo_code: '/icon/icons-list.html.twig#L108',
  } %}
    {% block content %}
      <div class="row">
        {% for icon in icons %}
          <div class="container-icon col-12 col-md-6 col-lg-4">
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: icon
            } %}
            {{ icon }}
          </div>
        {% endfor %}
      </div>
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Platforms icons'|trans,
    path_demo_code: '/icon/icons-list.html.twig#L124',
  } %}
    {% block content %}
      <div class="row">
        {% for icon in icons_platforms %}
          <div class="container-icon col-12 col-md-6 col-lg-4">
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: icon
            } %}
            {{ icon }}
          </div>
        {% endfor %}
      </div>
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Extra icons'|trans,
    path_demo_code: '/icon/icons-list.html.twig#L143',
  } %}
    {% block content %}
      <div class="row">
        {% for icon in icons_extra %}
          <div class="container-icon col-12 col-md-6 col-lg-4">
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: icon
            } %}
            {{ icon }}
          </div>
        {% endfor %}
      </div>
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'File icons'|trans,
    path_demo_code: '/icon/icons-list.html.twig#L162',
  } %}
    {% block content %}
      <div class="row">
        {% for icon in icons_files %}
          <div class="container-icon col-12 col-md-6 col-lg-4">
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: icon
            } %}
            {{ icon }}
          </div>
        {% endfor %}
      </div>
    {% endblock %}
  {% endembed %}

{% endapply %}