Star

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

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

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

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

.ai-star-icon .star {
  transform-origin: center;
}

.ai-star-icon:not(.no-hover):hover .star {
  animation: ai-star-twinkle 700ms ease-in-out;
}

@keyframes ai-star-twinkle {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(20deg) scale(1.15); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="star" fillRule="evenodd" d="M7.22271 0.665773C7.32528 0.419686 7.67484 0.419669 7.77739 0.665773L9.41314 4.60034C9.4563 4.70405 9.55412 4.77481 9.66607 4.78394L13.9141 5.12476C14.1799 5.14619 14.2874 5.47752 14.085 5.65112L13.8555 5.84644L10.8487 8.42358C10.7636 8.49661 10.7263 8.61137 10.752 8.72046L11.6709 12.572L11.7413 12.866C11.7953 13.093 11.5857 13.2787 11.3799 13.2283L11.293 13.1912L11.0352 13.033L7.6563 10.9705C7.56036 10.9119 7.43975 10.9119 7.3438 10.9705L3.70708 13.1912L3.62017 13.2283C3.41445 13.2787 3.20484 13.093 3.25884 12.866L3.32818 12.572L4.2481 8.72046C4.2674 8.63858 4.25134 8.55322 4.20611 8.48511L4.15142 8.42358L0.91509 5.65112C0.712634 5.47752 0.820148 5.14618 1.08599 5.12476L1.38677 5.10034L5.33403 4.78394C5.41796 4.77708 5.49411 4.73573 5.54497 4.67163L5.58696 4.60034L7.22271 0.665773ZM6.50982 4.98413C6.34606 5.37782 6.00173 5.66244 5.59282 5.75366L5.41314 5.78101L2.84282 5.98608L4.80181 7.66382L4.93071 7.79077C5.16843 8.05995 5.28398 8.41668 5.25005 8.77417L5.22075 8.95288L4.62212 11.4597L6.82232 10.1169L6.98345 10.0339C7.31289 9.89117 7.68721 9.89116 8.01665 10.0339L8.17778 10.1169L10.377 11.4597L9.77935 8.95288C9.66641 8.47881 9.82817 7.98087 10.1983 7.66382L12.1563 5.98608L9.58696 5.78101C9.16189 5.74693 8.78445 5.50702 8.57134 5.14624L8.49028 4.98413L7.50005 2.60327L6.50982 4.98413Z" fill="currentColor"/>
      </svg>
    </>
  );
}