Alain Afflelou Design System

Social: Facebook 

<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="M22 12C22 6.476 17.524 2 12 2C6.476 2 2 6.476 2 12C2 16.688 5.228 20.624 9.584 21.704V15.056H7.52V12H9.584V10.684C9.584 7.28 11.124 5.704 14.464 5.704C15.096 5.704 16.192 5.828 16.636 5.952V8.72C16.4 8.696 15.992 8.684 15.48 8.684C13.84 8.684 13.208 9.304 13.208 10.92V12H16.476L15.916 15.056H13.212V21.928C18.164 21.328 22 17.112 22 12Z" fill="currentColor" />
</svg>
 
{% include "@template-icon" %}
 
{
  "type": "social",
  "path": "M22 12C22 6.476 17.524 2 12 2C6.476 2 2 6.476 2 12C2 16.688 5.228 20.624 9.584 21.704V15.056H7.52V12H9.584V10.684C9.584 7.28 11.124 5.704 14.464 5.704C15.096 5.704 16.192 5.828 16.636 5.952V8.72C16.4 8.696 15.992 8.684 15.48 8.684C13.84 8.684 13.208 9.304 13.208 10.92V12H16.476L15.916 15.056H13.212V21.928C18.164 21.328 22 17.112 22 12Z"
}

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