Share 2

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add share-2 --react

Code

React

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function Share2Icon({ disableHover, className }: Props) {
  const classes = [
    "ai-share-2-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-share-2-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-share-2-icon * {
  transform-box: fill-box;
}

.ai-share-2-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-share-2-icon .arrow {
  transform-origin: center;
}

.ai-share-2-icon:not(.no-hover):hover .arrow {
  animation: ai-share-2-send 700ms ease-in-out;
}

@keyframes ai-share-2-send {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="box" fillRule="evenodd" d="M2 5.50006C2 4.67163 2.67157 4.00006 3.5 4.00006L4.75 4.00006C5.02614 4.00006 5.25 4.22392 5.25 4.50006C5.25 4.7762 5.02614 5.00006 4.75 5.00006L3.5 5.00006C3.22386 5.00006 3 5.22392 3 5.50006L3 11.5001C3 11.7762 3.22386 12.0001 3.5 12.0001L11.5 12.0001C11.7761 12.0001 12 11.7762 12 11.5001L12 5.50006C12 5.22392 11.7761 5.00006 11.5 5.00006L10.25 5.00006C9.97386 5.00006 9.75 4.7762 9.75 4.50006C9.75 4.22392 9.97386 4.00006 10.25 4.00006L11.5 4.00006C12.3284 4.00006 13 4.67163 13 5.50006L13 11.5001C13 12.3285 12.3284 13.0001 11.5 13.0001L3.5 13.0001C2.67157 13.0001 2 12.3285 2 11.5001L2 5.50006Z" fill="currentColor"/>
        <path className="arrow" d="M4.93164 3.06842C4.77781 2.91459 4.75854 2.6767 4.87402 2.50201L4.93164 2.4317L7.18164 0.181701C7.26603 0.0973098 7.38065 0.0498655 7.5 0.0498655C7.61935 0.0498655 7.73397 0.0973098 7.81836 0.181701L10.0684 2.4317C10.2441 2.60744 10.2441 2.89269 10.0684 3.06842C9.89263 3.24412 9.60737 3.24412 9.43164 3.06842L8 1.63678L8 8.50006C7.99997 8.77618 7.77612 9.00006 7.5 9.00006C7.22388 9.00006 7.00003 8.77618 7 8.50006L7 1.63678L5.56836 3.06842L5.49805 3.12604C5.32337 3.24152 5.08548 3.22223 4.93164 3.06842Z" fill="currentColor"/>
      </svg>
    </>
  );
}