Icons

Default

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

          <span class="icon">
      <img src="images/svg/edit.svg"  loading="lazy">
  
  </span>

Large (24px)

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

          <span class="icon  --lg">
      <img src="images/svg/edit.svg"  loading="lazy">
  
  </span>

Small (14px)

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

          <span class="icon  --sm">
      <img src="images/svg/edit.svg"  loading="lazy" width="14" height="14">
  
  </span>

Extra large (32px)

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

          <span class="icon  --xl">
      <img src="images/svg/history.svg"  loading="lazy">
  
  </span>

Color primary

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

          <span class="icon --primary">
      <img src="images/svg/edit.svg"  loading="lazy">
  
  </span>

Color white

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

          <span class="icon --white">
      <img src="images/svg/edit.svg"  loading="lazy">
  
  </span>

icon with badge

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

          <span class="icon">
      <img src="images/svg/mail.svg" alt="Email" loading="lazy">
  
      <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"
    }
  }
}