Alain Afflelou Design System

Social: Youtube 

<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.92343 17.3051C9.32229 17.4697 14.6731 17.4697 17.0754 17.3051C19.6743 17.1269 19.9794 15.8617 20 11.7143C19.9794 7.57486 19.6777 6.30171 17.0754 6.12343C14.6743 5.95886 9.32229 5.95886 6.92343 6.12343C4.32571 6.30171 4.01943 7.56686 4 11.7143C4.01943 15.8537 4.32229 17.1269 6.92343 17.3051ZM15.3337 11.7097L9.71429 14.3909V9.03771L15.3337 11.7097Z" fill="currentColor" />
</svg>
 
{% include "@template-icon" %}
 
{
  "type": "social",
  "path": "M6.92343 17.3051C9.32229 17.4697 14.6731 17.4697 17.0754 17.3051C19.6743 17.1269 19.9794 15.8617 20 11.7143C19.9794 7.57486 19.6777 6.30171 17.0754 6.12343C14.6743 5.95886 9.32229 5.95886 6.92343 6.12343C4.32571 6.30171 4.01943 7.56686 4 11.7143C4.01943 15.8537 4.32229 17.1269 6.92343 17.3051ZM15.3337 11.7097L9.71429 14.3909V9.03771L15.3337 11.7097Z"
}

Social icons guide

How to use

(You can click on the icons to copy the correct icon name)

Template name

icons-social

Import

{% render "@icons-social--variant" with {...} %}

Examples

{% render "@icons-library--facebook" %}

Available props

  • viewBox: string | default: 0 0 48 24
  • iconClass: string | default: null
  • size: 12, 16, 24, 32, 40, 48, 64, 92 | default: 24
  • path: string | default: svg path d attribute