Clever Component Library

Icon 

<span class="icon icon-facebook">
        <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 32">
                <path d="M10.7 11.8V7.5c0-.6.3-1.5 1.3-1.5h3.4V0H9.1C6.9 0 3.7 2.7 3.7 5.5v6.1H0v6h3.7V32h7V17.8h4.8l1.2-5.9h-6z" />
            </svg>
        </span>
    </span>
 
{% set path = source|split('/') %}
{% set filename = path|last %}
{% set extension = filename|split('.')[1] %}
{% if path|length > 1 %}
    {% set pathFilename = path|join('/') %}
{% else %}
    {% set pathFilename = 'assets/img/icons/' ~ filename %}
{% endif %}
<span class="icon {{ filename|split('.')[0] }}{% if modifiers is defined and modifiers|length %} icon--{{ modifiers|join(' icon--') }}{% endif %}">
    {% if extension == 'svg' %}
        <span class="svg-container">{{ inline(pathFilename) }}</span>
    {% else %}
        <img src="{{ pathFilename }}"{% if source2x %} srcset="{{ pathFilename }} 1x, {{ source2x }} 2x"{% endif %}{% if width is defined and width %} width="{{ width }}"{% endif %}{% if height is defined and height %} height="{{ height }}"{% endif %} alt="{{ alt|default('') }}">
    {% endif %}
</span>
 
{
  "source": "icon-facebook.svg"
}

No notes defined.