Share button

Whatsapp 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
     variant: "whatsapp",
      href: "whatsapp://send?text=https://youtu.be/989-7xsRLR4?t=34",
      tag:"a",
      icon: {
        src: "images/svg/whatsapp.svg",}
  }
}
 %}

      
  •           <a class="share-button --whatsapp" href='whatsapp://send?text=https://youtu.be/989-7xsRLR4?t=34'>
  <span class="icon  --lg">
      <img src="images/svg/whatsapp.svg"  loading="lazy">
  
  </span>
</a>

Messenger 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
    variant: "messenger",
      href: "fb-messenger://share/?link=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "images/svg/messenger.svg",}
  }
}
 %}

      
  •           <a class="share-button --messenger" href='fb-messenger://share/?link=https://youtu.be/989-7xsRLR4?t=34'>
  <span class="icon  --lg">
      <img src="images/svg/messenger.svg"  loading="lazy">
  
  </span>
</a>

Facebook 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
      variant: "facebook",
      href: "https://www.facebook.com/sharer/sharer.php?u=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "images/svg/facebook-share.svg",}
  }
}
 %}

      
  •           <a class="share-button --facebook" href='https://www.facebook.com/sharer/sharer.php?u=https://youtu.be/989-7xsRLR4?t=34'>
  <span class="icon  --lg">
      <img src="images/svg/facebook-share.svg"  loading="lazy">
  
  </span>
</a>

Twitter 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
      variant: "twitter",
      href: "https://twitter.com/home?status=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "images/svg/twitter.svg",}
  }
}
 %}

      
  •           <a class="share-button --twitter" href='https://twitter.com/home?status=https://youtu.be/989-7xsRLR4?t=34'>
  <span class="icon  --lg">
      <img src="images/svg/twitter.svg"  loading="lazy">
  
  </span>
</a>

Print 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
    variant: "print",
      tag: "button",
      type:"button",
      icon: {
        src: "images/svg/print.svg",}
  }
}
 %}

      
  •             <button class="share-button --print" type="button">
  <span class="icon  --lg">
      <img src="images/svg/print.svg"  loading="lazy">
  
  </span>
</button>

Copy 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
    variant: "copy",
      tag: "button",
      type:"button",
      icon: {
        src: "images/svg/copy-url.svg",}
  }
}
 %}

      
  •               <button class="share-button --copy" type="button" data-target="copy-modal" data-toggle="modal">
  <span class="icon  --lg">
      <img src="images/svg/copy-url.svg"  loading="lazy">
  
  </span>
</button>

Mail 

  •         {% include "@Components/share-button/share-button.twig" with {
  props : {
    variant: "mail",
      href:"mailto:?&body=https://youtu.be/989-7xsRLR4?t=34",
    icon: {
      src: "images/svg/send-mail.svg",
    }
  }
}
 %}

      
  •           <a class="share-button --mail" href='mailto:?&body=https://youtu.be/989-7xsRLR4?t=34'>
  <span class="icon  --lg">
      <img src="images/svg/send-mail.svg"  loading="lazy">
  
  </span>
</a>

Schema 

    {
  "props": {
    "variant": {
      "type": "string",
      "description": "whatsapp | messenger | facebook | twitter | print | copy | mail"
    },
    "href": {
      "type": "string",
      "description": "URL address"
    },
    "tag": {
      "type": "string",
      "description": "a (default) | button | span"
    },
    "id": {
      "type": "string",
      "description": "ID of button"
    },
    "blank": {
      "type": "boolean",
      "description": "true | undefined"
    },
    "icon": {
      "src": {
        "type": "string",
        "description": "Path to icon"
      }
    }
  }
}