Image

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

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

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

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

.ai-image-icon .sun {
  transform-origin: center;
}

.ai-image-icon:not(.no-hover):hover .sun {
  animation: ai-image-rise 700ms ease-in-out;
}

@keyframes ai-image-rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="frame" d="M12.5 1C13.3284 1 14 1.67157 14 2.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.72334 14 1.08461 13.4097 1.00781 12.6533L1 12.5V2.5C1 1.67157 1.67157 1 2.5 1H12.5ZM2 9.63574V12.5L2.00977 12.6006C2.04966 12.7961 2.20392 12.9503 2.39941 12.9902L2.5 13H8.94141L7.52832 11.4395V11.4385L3.98828 7.64746L2 9.63574ZM8.4834 11.1523L10.1553 13H12.5L12.6006 12.9902C12.7961 12.9503 12.9503 12.7961 12.9902 12.6006L13 12.5V10.6367L11 8.63672L8.4834 11.1523ZM2.39941 2.00977C2.17145 2.05629 2 2.25829 2 2.5V8.36328L3.68164 6.68164L3.75195 6.625C3.82721 6.57522 3.91621 6.54823 4.00781 6.5498C4.1298 6.55192 4.24585 6.60417 4.3291 6.69336L7.87305 10.4893L10.6816 7.68164L10.752 7.62402C10.9266 7.50851 11.1645 7.5278 11.3184 7.68164L13 9.36328V2.5C13 2.25829 12.8286 2.05629 12.6006 2.00977L12.5 2H2.5L2.39941 2.00977Z" fill="currentColor"/>
        <path className="sun" d="M7.5 3.74902C8.46693 3.74902 9.25098 4.53307 9.25098 5.5C9.25098 6.46693 8.46693 7.25098 7.5 7.25098C6.53307 7.25098 5.74902 6.46693 5.74902 5.5C5.74902 4.53307 6.53307 3.74902 7.5 3.74902ZM7.5 4.64941C7.03013 4.64941 6.64941 5.03013 6.64941 5.5C6.64941 5.96987 7.03013 6.35059 7.5 6.35059C7.96987 6.35059 8.35059 5.96987 8.35059 5.5C8.35059 5.03013 7.96987 4.64941 7.5 4.64941Z" fill="currentColor"/>
      </svg>
    </>
  );
}