Eye Closed

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

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

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

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

.ai-eye-closed-icon .eye { transform-origin: center; }

.ai-eye-closed-icon:not(.no-hover):hover .eye {
  animation: ai-eye-closed-motion 700ms ease-in-out;
}

@keyframes ai-eye-closed-motion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="eye" d="M5.58284 12.5867C5.5113 12.8531 5.23703 13.0113 4.97054 12.9402C4.70421 12.8686 4.54496 12.5943 4.61605 12.3279L5.58284 12.5867ZM10.3826 12.3279C10.4539 12.5945 10.2956 12.8686 10.0291 12.9402C9.76261 13.0113 9.48834 12.8531 9.41681 12.5867L10.3826 12.3279ZM14.1375 6.15505C14.2977 5.98633 14.5595 5.94799 14.7644 6.07595C14.9692 6.20395 15.0496 6.45576 14.9685 6.6736L14.9236 6.76442C14.4845 7.46696 13.962 8.1052 13.3689 8.66188L14.5711 9.86402L14.6355 9.94214C14.7636 10.1362 14.7419 10.4002 14.5711 10.571C14.4003 10.7419 14.1363 10.7636 13.9422 10.6355L13.8641 10.571L12.5994 9.3064C11.8032 9.90116 10.9077 10.3602 9.93243 10.6492L10.3826 12.3279L9.89923 12.4568L9.41681 12.5867L8.95783 10.8777C8.48648 10.958 7.99975 10.9998 7.49983 10.9998C6.9991 10.9998 6.51194 10.9563 6.03987 10.8757L5.58284 12.5867L5.09945 12.4568L4.61605 12.3279L5.06527 10.6492C4.09036 10.3601 3.19423 9.90202 2.39829 9.30738L1.1356 10.571C0.940342 10.7662 0.623806 10.7662 0.428567 10.571C0.233426 10.3758 0.233415 10.0593 0.428567 9.86402L1.62973 8.66188C1.10375 8.1681 0.633248 7.61 0.227396 6.99977L0.0760295 6.76442L0.0311078 6.6736C-0.0498844 6.45577 0.0304399 6.20394 0.235208 6.07595C0.440189 5.94795 0.701937 5.98637 0.862159 6.15505L0.923682 6.23513L1.20102 6.65114C2.63903 8.68678 4.86748 9.99974 7.49983 9.99976C10.3076 9.99976 12.6564 8.50638 14.076 6.23513L14.1375 6.15505Z" fill="currentColor"/>
      </svg>
    </>
  );
}