Letter Case Uppercase

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

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

.ai-letter-case-uppercase-icon * {
  transform-box: fill-box;
}

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

.ai-letter-case-uppercase-icon .letters {
  transform-origin: center;
}

.ai-letter-case-uppercase-icon:not(.no-hover):hover .letters {
  animation: ai-letter-case-uppercase-emphasis 700ms ease-in-out;
}

@keyframes ai-letter-case-uppercase-emphasis {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="letters" d="M1.01858 11.7432C0.92273 12.0019 0.634867 12.1337 0.375998 12.0381C0.117505 11.9421 -0.0144397 11.6552 0.0810757 11.3965L1.01858 11.7432ZM7.16994 11.3965C7.26534 11.6553 7.13266 11.9423 6.87404 12.0381C6.61513 12.1337 6.32728 12.002 6.23147 11.7432L7.16994 11.3965ZM8.76467 11.7432C8.66879 12.002 8.38099 12.1338 8.12209 12.0381C7.86367 11.9421 7.73169 11.6552 7.82717 11.3965L8.76467 11.7432ZM14.916 11.3965C15.0115 11.6553 14.8789 11.9423 14.6201 12.0381C14.3612 12.1337 14.0733 12.002 13.9776 11.7432L14.916 11.3965ZM3.62502 2.75001C3.83403 2.75007 4.02107 2.88026 4.09377 3.07618L7.16994 11.3965L6.70022 11.5693L6.23147 11.7432L5.22365 9.01563H2.02639L1.01858 11.7432L0.549826 11.5693L0.0810757 11.3965L3.15627 3.07618L3.1885 3.00587C3.27579 2.84968 3.44214 2.75012 3.62502 2.75001ZM11.3711 2.75001C11.5802 2.75001 11.7671 2.88023 11.8399 3.07618L14.916 11.3965L14.4463 11.5693L13.9776 11.7432L12.9697 9.01563H9.77248L8.76467 11.7432L8.29592 11.5693L7.82717 11.3965L10.9024 3.07618L10.9346 3.00587C11.0219 2.84967 11.1883 2.75016 11.3711 2.75001ZM2.34084 8.16602H4.9092L3.62502 4.69141L2.34084 8.16602ZM10.0869 8.16602H12.6553L11.3711 4.69141L10.0869 8.16602Z" fill="currentColor"/>
      </svg>
    </>
  );
}