Table

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

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

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

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

.ai-table-icon .grid {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

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

@keyframes ai-table-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="grid" d="M12.6533 1.00781C13.4097 1.08461 14 1.72334 14 2.5V12.5L13.9922 12.6533C13.9205 13.3593 13.3593 13.9205 12.6533 13.9922L12.5 14H2.5L2.34668 13.9922C1.64069 13.9205 1.07949 13.3593 1.00781 12.6533L1 12.5V2.5C1 1.72334 1.59028 1.08461 2.34668 1.00781L2.5 1H12.5L12.6533 1.00781ZM2 12.5C2 12.7761 2.22386 13 2.5 13H7V10H2V12.5ZM8 13H12.5C12.7761 13 13 12.7761 13 12.5V10H8V13ZM2 6V9H7V6H2ZM8 6V9H13V6H8ZM2.5 2C2.22386 2 2 2.22386 2 2.5V5H7V2H2.5ZM8 5H13V2.5C13 2.22386 12.7761 2 12.5 2H8V5Z" fill="currentColor"/>
      </svg>
    </>
  );
}