Upload

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 upload --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 UploadIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-upload-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

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

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

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

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

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

@keyframes ai-upload-launch {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-1.5px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="tray" d="M12.5 10.0002C12.7761 10.0002 13 10.2241 13 10.5002V12.0002C12.9998 13.1042 12.1059 14.0002 11.001 14.0002H3.99609C2.89017 14.0001 2.00018 13.103 2 12.0002V10.5002C2 10.2241 2.22386 10.0002 2.5 10.0002C2.77614 10.0002 3 10.2241 3 10.5002V12.0002C3.00018 12.5539 3.44563 13.0001 3.99609 13.0002H11.001C11.5526 13.0002 11.9998 12.5529 12 12.0002V10.5002C12 10.2241 12.2239 10.0002 12.5 10.0002Z" fill="currentColor"/>
        <path className="arrow" d="M7.18164 1.18188C7.35738 1.00615 7.64262 1.00615 7.81836 1.18188L10.8184 4.18188C10.994 4.35762 10.9941 4.64289 10.8184 4.8186C10.6426 4.99417 10.3573 4.9942 10.1816 4.8186L7.9502 2.58618V9.50024C7.95001 9.74861 7.74841 9.94946 7.5 9.94946C7.25161 9.94943 7.04999 9.74859 7.0498 9.50024V2.58618L4.81836 4.8186C4.64264 4.99417 4.35734 4.9942 4.18164 4.8186C4.00595 4.64291 4.00604 4.35763 4.18164 4.18188L7.18164 1.18188Z" fill="currentColor"/>
      </svg>
    </>
  );
}