Exclamation Triangle

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

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

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

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

.ai-exclamation-triangle-icon .excl {
  transform-origin: center;
}

.ai-exclamation-triangle-icon:not(.no-hover):hover .excl {
  animation: ai-exclamation-triangle-motion 700ms ease-in-out;
}

@keyframes ai-exclamation-triangle-motion {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-1px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="excl" d="M6.64204 0.483078C7.10887 -0.10392 8.04464 -0.0624346 8.44477 0.608078L14.8393 11.3366C15.2761 12.0697 14.7473 12.9995 13.894 12.9997H1.1059C0.252569 12.9994 -0.275364 12.0697 0.161567 11.3366L6.55512 0.608078L6.64204 0.483078ZM7.45161 1.08366L7.4145 1.12077L1.01997 11.8483C0.980388 11.9148 1.02858 11.9994 1.1059 11.9997H13.894C13.9714 11.9995 14.0196 11.9149 13.9799 11.8483L7.58637 1.12077C7.55727 1.07208 7.49625 1.05933 7.45161 1.08366ZM7.49946 9.72624C7.91367 9.72624 8.24946 10.062 8.24946 10.4762C8.24933 10.8903 7.91359 11.2262 7.49946 11.2262C7.08549 11.226 6.74958 10.8902 6.74946 10.4762C6.74946 10.0622 7.08542 9.72645 7.49946 9.72624ZM7.49946 3.78679C7.88158 3.78679 8.1879 4.10418 8.17329 4.48601L8.01899 8.48698C8.00826 8.76597 7.77866 8.98698 7.49946 8.98698C7.22048 8.98673 6.99163 8.76581 6.9809 8.48698L6.82661 4.48601C6.812 4.10434 7.11756 3.78706 7.49946 3.78679Z" fill="currentColor"/>
      </svg>
    </>
  );
}