Heart Filled

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

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

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

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

.ai-heart-filled-icon .heart {
  transform-origin: center;
}

.ai-heart-filled-icon:not(.no-hover):hover .heart {
  animation: ai-heart-filled-beat 700ms ease-in-out;
}

@keyframes ai-heart-filled-beat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.12); }
  35% { transform: scale(1); }
  55% { transform: scale(1.1); }
  70% { transform: scale(1); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="heart" d="M10.1064 1.35248C12.0638 1.35248 13.6473 2.94492 13.6474 4.90521C13.6474 6.7403 12.6009 8.50547 11.4003 9.96967C10.2633 11.3564 8.92163 12.5507 8.0058 13.3661C7.94628 13.4191 7.88869 13.4707 7.83295 13.5204C7.64328 13.6897 7.35659 13.6897 7.16693 13.5204C7.11121 13.4707 7.05356 13.4191 6.99408 13.3661C6.07823 12.5507 4.73659 11.3563 3.59955 9.96967C2.39901 8.50547 1.35248 6.7403 1.35248 4.90521C1.35254 2.94492 2.93607 1.35248 4.89349 1.35248C6.2577 1.35249 6.8605 1.92341 7.49994 2.93549C8.13935 1.92344 8.74229 1.35253 10.1064 1.35248Z" fill="currentColor"/>
      </svg>
    </>
  );
}