@delvicons/icons/dist/vanilla/components/HeartBeat.ts

DelvIcons - Comprehensive icon library with static and animated SVG icons for all frameworks

export function createHeartBeat(options = {}) {
  const {
    size = 24,
    color = 'currentColor',
    className = '',
    animated = true,
    ...attrs
  } = options;

  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', size.toString());
  svg.setAttribute('height', size.toString());
  svg.setAttribute('viewBox', '0 0 24 24');
  svg.setAttribute('fill', 'none');
  svg.className = [
    'delv-icon',
    'delv-icon-heart-beat',
    animated ? 'delv-animated' : '',
    className
  ].filter(Boolean).join(' ');

  // Set additional attributes
  Object.entries(attrs).forEach(([key, value]) => {
    svg.setAttribute(key, value);
  });

  svg.innerHTML = `<path d="M20.84 4.61A5.5 5.5 0 0 0 16.5 2.5C14.76 2.5 13.25 3.42 12 4.84C10.75 3.42 9.24 2.5 7.5 2.5A5.5 5.5 0 0 0 3.16 4.61A5.65 5.65 0 0 0 2 8.5C2 12.28 12 21.5 12 21.5S22 12.28 22 8.5C22 6.81 21.36 5.27 20.84 4.61Z" 
        fill="currentColor">
    <animateTransform 
      attributeName="transform" 
      type="scale" 
      values="1;1.2;1;1;1" 
      dur="2s" 
      repeatCount="indefinite"
      calcMode="spline"
      keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1;0.25 0.1 0.25 1;0.25 0.1 0.25 1"
      keyTimes="0;0.3;0.6;0.8;1"
      transformOrigin="12 12"/>
  </path>`;
  return svg;
}