Id Card

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

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

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

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

.ai-id-card-icon .card {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-id-card-icon:not(.no-hover):hover .card {
  animation: ai-id-card-present 700ms ease-in-out;
}

@keyframes ai-id-card-present {
  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="card" d="M14 3.00006C14.5523 3.00006 15 3.44778 15 4.00006V11.0001C15 11.5523 14.5523 12.0001 14 12.0001H1L0.897461 11.9952C0.393331 11.9438 0 11.5177 0 11.0001V4.00006C0 3.44778 0.447715 3.00006 1 3.00006H14ZM1 11.0001H14V4.00006H1V11.0001ZM5.75 5.00006C5.88807 5.00006 6 5.11199 6 5.25006V9.75006C5.99997 9.8881 5.88805 10.0001 5.75 10.0001H2.25C2.11195 10.0001 2.00003 9.8881 2 9.75006V5.25006C2 5.11199 2.11193 5.00006 2.25 5.00006H5.75ZM12.5 9.00006C12.7761 9.00006 13 9.22392 13 9.50006C13 9.77618 12.7761 10.0001 12.5 10.0001H7.5C7.22388 10.0001 7.00003 9.77618 7 9.50006C7 9.22392 7.22386 9.00006 7.5 9.00006H12.5ZM10.5 7.00006C10.7761 7.00006 11 7.22392 11 7.50006C11 7.77618 10.7761 8.00006 10.5 8.00006H7.5C7.22388 8.00006 7.00003 7.77618 7 7.50006C7 7.22392 7.22386 7.00006 7.5 7.00006H10.5ZM11.5 5.00006C11.7761 5.00006 12 5.22392 12 5.50006C12 5.77618 11.7761 6.00006 11.5 6.00006H7.5C7.22388 6.00006 7.00003 5.77618 7 5.50006C7 5.22392 7.22386 5.00006 7.5 5.00006H11.5Z" fill="currentColor"/>
      </svg>
    </>
  );
}