Font Family

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

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

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

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

.ai-font-family-icon .letter {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-font-family-icon:not(.no-hover):hover .letter {
  animation: ai-font-family-rock 700ms ease-in-out;
}

@keyframes ai-font-family-rock {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="letter" d="M12.499 2C12.7752 2 13 2.22386 13 2.5C13 2.77613 12.7761 2.99999 12.5 3H8.69238L8.40527 3.85449C8.18888 4.4974 7.89414 5.37193 7.58105 6.29785C7.50275 6.52943 7.42349 6.76457 7.34375 7H8.5C8.77614 7 9 7.22386 9 7.5C9 7.77614 8.77614 8 8.5 8H7.00391C6.56708 9.28541 6.16437 10.4618 5.95801 11.0391C5.63631 11.9388 5.20662 12.4862 4.66699 12.7783C4.16329 13.0508 3.6418 13.0501 3.28418 13.0498H3.25C2.94625 13.0498 2.70021 12.8037 2.7002 12.5C2.7002 12.1962 2.94624 11.9502 3.25 11.9502C3.64173 11.9502 3.90336 11.9405 4.14355 11.8105C4.36424 11.6911 4.65502 11.4145 4.92188 10.668C5.10667 10.151 5.45342 9.14113 5.8418 8H4.5C4.22386 8 4 7.77614 4 7.5C4 7.22386 4.22386 7 4.5 7H6.18164C6.30105 6.64785 6.42151 6.29295 6.53906 5.94531C6.85186 5.02022 7.14604 4.14644 7.3623 3.50391L7.53223 3H5C4.15114 3 3.5 3.65114 3.5 4.5C3.5 4.77614 3.27614 5 3 5C2.72386 5 2.5 4.77614 2.5 4.5C2.5 3.09886 3.59886 2 5 2H12.499Z" fill="currentColor"/>
      </svg>
    </>
  );
}