Mask Off

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

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

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

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

.ai-mask-off-icon .mask {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-mask-off-icon:not(.no-hover):hover .mask {
  animation: ai-mask-off-tilt 700ms ease-in-out;
}

@keyframes ai-mask-off-tilt {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(4deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="mask" d="M14.1025 1.00488C14.6067 1.05621 15 1.48232 15 2V13L14.9951 13.1025C14.9472 13.573 14.573 13.9472 14.1025 13.9951L14 14H1L0.897461 13.9951C0.427034 13.9472 0.0527828 13.573 0.00488281 13.1025L0 13V2C0 1.48232 0.393331 1.05621 0.897461 1.00488L1 1H14L14.1025 1.00488ZM1 13H14V2H1V13ZM7.5 3.875C9.50203 3.875 11.125 5.49797 11.125 7.5C11.125 9.50203 9.50203 11.125 7.5 11.125C5.49797 11.125 3.875 9.50203 3.875 7.5C3.875 5.49797 5.49797 3.875 7.5 3.875ZM7.5 4.875C6.05025 4.875 4.875 6.05025 4.875 7.5C4.875 8.94975 6.05025 10.125 7.5 10.125C8.94975 10.125 10.125 8.94975 10.125 7.5C10.125 6.05025 8.94975 4.875 7.5 4.875Z" fill="currentColor"/>
      </svg>
    </>
  );
}