Zoom In

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

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

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

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

.ai-zoom-in-icon .plus {
  transform-box: view-box;
  transform-origin: 6.5px 6.5px;
}

.ai-zoom-in-icon:not(.no-hover):hover .plus {
  animation: ai-zoom-in-pop 700ms ease-in-out;
}

@keyframes ai-zoom-in-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="lens" fillRule="evenodd" d="M6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56246 10.6304 8.5378 10.0146 9.30762L12.8535 12.1465L12.918 12.2246C13.0461 12.4187 13.0244 12.6827 12.8535 12.8535C12.6827 13.0244 12.4187 13.0461 12.2246 12.918L12.1465 12.8535L9.30762 10.0146C8.5378 10.6304 7.56246 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2ZM6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3Z" fill="currentColor"/>
        <path className="plus" d="M6.5 4.25C6.77614 4.25 7 4.47386 7 4.75V6H8.25L8.35059 6.00977C8.57855 6.05629 8.75 6.25829 8.75 6.5C8.75 6.74171 8.57855 6.94371 8.35059 6.99023L8.25 7H7V8.25C7 8.52614 6.77614 8.75 6.5 8.75C6.22386 8.75 6 8.52614 6 8.25V7H4.75C4.47386 7 4.25 6.77614 4.25 6.5C4.25 6.22386 4.47386 6 4.75 6H6V4.75C6 4.47386 6.22386 4.25 6.5 4.25Z" fill="currentColor"/>
      </svg>
    </>
  );
}