Icons

Default

        {% include "@Components/icon/icon.twig" with {props: {
    src: "svg/edit.svg",
  }
} %}

          <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.841" height="17.841" viewBox="0 0 17.841 17.841">
  <g id="Group_2531" data-name="Group 2531" transform="translate(-282.097 -76.244)">
    <line id="Line_299" data-name="Line 299" x1="3.666" y1="3.664" transform="translate(292.498 80.019)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <path id="Path_3801" data-name="Path 3801" d="M286.1,93.335h-3.251V90.084a1,1,0,0,1,.293-.706l11.984-11.985a1,1,0,0,1,1.414,0l2.252,2.251a1,1,0,0,1,0,1.415L286.8,93.042A.993.993,0,0,1,286.1,93.335Z" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>

Large (24px)

        {% include "@Components/icon/icon.twig" with {
  props : {
    src: "svg/edit.svg",
    size: "lg"
  }
} %}

          <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.841" height="17.841" viewBox="0 0 17.841 17.841">
  <g id="Group_2531" data-name="Group 2531" transform="translate(-282.097 -76.244)">
    <line id="Line_299" data-name="Line 299" x1="3.666" y1="3.664" transform="translate(292.498 80.019)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <path id="Path_3801" data-name="Path 3801" d="M286.1,93.335h-3.251V90.084a1,1,0,0,1,.293-.706l11.984-11.985a1,1,0,0,1,1.414,0l2.252,2.251a1,1,0,0,1,0,1.415L286.8,93.042A.993.993,0,0,1,286.1,93.335Z" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>

Small (14px)

        {% include "@Components/icon/icon.twig" with {
  props : {
    src: "svg/edit.svg",
    size: "sm"
  }
} %}

          <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.841" height="17.841" viewBox="0 0 17.841 17.841">
  <g id="Group_2531" data-name="Group 2531" transform="translate(-282.097 -76.244)">
    <line id="Line_299" data-name="Line 299" x1="3.666" y1="3.664" transform="translate(292.498 80.019)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <path id="Path_3801" data-name="Path 3801" d="M286.1,93.335h-3.251V90.084a1,1,0,0,1,.293-.706l11.984-11.985a1,1,0,0,1,1.414,0l2.252,2.251a1,1,0,0,1,0,1.415L286.8,93.042A.993.993,0,0,1,286.1,93.335Z" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>

Extra large (32px)

        {% include "@Components/icon/icon.twig" with {
  props : {
    src: "svg/history.svg",
    size: "xl",
    color: "black"
  }
} %}

          <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="57.425" height="52.193" viewBox="0 0 57.425 52.193">
  <g id="history" transform="translate(-673.27 -175.438)">
    <path id="Path_3546" data-name="Path 3546" d="M675.391,186.5l4.61,4.609,4.613-4.609" transform="translate(0 16.569)" fill="none" stroke="#2e3a43" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path id="Path_3547" data-name="Path 3547" d="M677.078,207.681v-6.149a24.632,24.632,0,1,1,5.414,15.376" transform="translate(2.924 0)" fill="none" stroke="#2e3a43" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path id="Path_3548" data-name="Path 3548" d="M695.58,200.74,685.6,194.8v-12.88" transform="translate(17.69 8.637)" fill="none" stroke="#2e3a43" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
  </g>
</svg>

  </span>

Color primary

        {% include "@Components/icon/icon.twig" with {
  props : {
    src: "svg/edit.svg",
    color: "primary"
  }
} %}

          <span class="icon --primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.841" height="17.841" viewBox="0 0 17.841 17.841">
  <g id="Group_2531" data-name="Group 2531" transform="translate(-282.097 -76.244)">
    <line id="Line_299" data-name="Line 299" x1="3.666" y1="3.664" transform="translate(292.498 80.019)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <path id="Path_3801" data-name="Path 3801" d="M286.1,93.335h-3.251V90.084a1,1,0,0,1,.293-.706l11.984-11.985a1,1,0,0,1,1.414,0l2.252,2.251a1,1,0,0,1,0,1.415L286.8,93.042A.993.993,0,0,1,286.1,93.335Z" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>

Color white

        {% include "@Components/icon/icon.twig" with {
  props : {
    src: "svg/edit.svg",
    color: "white"
  }
} %}

          <span class="icon --white">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.841" height="17.841" viewBox="0 0 17.841 17.841">
  <g id="Group_2531" data-name="Group 2531" transform="translate(-282.097 -76.244)">
    <line id="Line_299" data-name="Line 299" x1="3.666" y1="3.664" transform="translate(292.498 80.019)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <path id="Path_3801" data-name="Path 3801" d="M286.1,93.335h-3.251V90.084a1,1,0,0,1,.293-.706l11.984-11.985a1,1,0,0,1,1.414,0l2.252,2.251a1,1,0,0,1,0,1.415L286.8,93.042A.993.993,0,0,1,286.1,93.335Z" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>

icon with badge

        {% include "@Components/icon/icon.twig" with {props: {
  src: "svg/mail.svg",
  badge: {
    title: "69",
  },
}} %}

          <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 15.46"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>mail</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><rect class="cls-1" x="0.75" y="0.75" width="18" height="13.96" rx="2.12" ry="2.12"/><path class="cls-1" d="M14.75,4.73l-3.38,2a3.14,3.14,0,0,1-3.24,0l-3.38-2"/></g></g></svg>
      <div class="icon__badge">
      <div class="badge --red --small">
  <span class="badge__title">69</span>
  </div>
    </div>
  </span>

Schema

    {
  "props": {
    "src": {
      "type": "string",
      "description": "path to icon"
    },
    "color": {
      "type": "string",
      "description": "black (default) | primary | white"
    },
    "tag": {
      "type": "string",
      "description": "div | span (default)"
    },
    "size": {
      "type": "string",
      "description": "xl | lg | sm | xs"
    },
    "extraClass": {
      "type": "string",
      "description": "Addiotional class to the component"
    }
  }
}