Ruler Square

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

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

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

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

.ai-ruler-square-icon .ruler {
  transform-box: view-box;
  transform-origin: 0.5px 14.5px;
}

.ai-ruler-square-icon:not(.no-hover):hover .ruler {
  animation: ai-ruler-square-pivot 700ms ease-in-out;
}

@keyframes ai-ruler-square-pivot {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(6deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="ruler" d="M14.6006 0.00976562C14.8286 0.056292 15 0.258287 15 0.5V4.5C15 4.77614 14.7761 5 14.5 5H5V14.5C5 14.7761 4.77614 15 4.5 15H0.5C0.223858 15 0 14.7761 0 14.5V0.5L0.00976562 0.399414C0.056292 0.171447 0.258287 0 0.5 0H14.5L14.6006 0.00976562ZM1 4.9248V14H4V12.9248H2.75C2.51529 12.9248 2.3252 12.7347 2.3252 12.5C2.32521 12.2653 2.5153 12.0752 2.75 12.0752H4V10.9248H2.25C2.01529 10.9248 1.8252 10.7347 1.8252 10.5C1.82521 10.2653 2.0153 10.0752 2.25 10.0752H4V8.9248H2.75C2.51529 8.92479 2.32519 8.73471 2.3252 8.5C2.32521 8.2653 2.5153 8.07521 2.75 8.0752H4V6.9248H2.75C2.51528 6.9248 2.32519 6.73472 2.3252 6.5C2.3252 6.26528 2.51528 6.0752 2.75 6.0752H4V4.9248H1ZM1 4.0752H4.0752V1H1V4.0752ZM4.9248 4H6.0752V2.75C6.07523 2.51531 6.2653 2.3252 6.5 2.3252C6.7347 2.3252 6.92477 2.51531 6.9248 2.75V4H8.0752V2.75C8.07522 2.51531 8.2653 2.32521 8.5 2.3252C8.7347 2.3252 8.92478 2.5153 8.9248 2.75V4H10.0752V2.25C10.0752 2.01532 10.2653 1.82523 10.5 1.8252C10.7347 1.8252 10.9248 2.0153 10.9248 2.25V4H12.0752V2.75C12.0752 2.51533 12.2653 2.32523 12.5 2.3252C12.7347 2.3252 12.9248 2.5153 12.9248 2.75V4H14V1H4.9248V4Z" fill="currentColor"/>
      </svg>
    </>
  );
}