Text Align Bottom

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

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

.ai-text-align-bottom-icon * {
  transform-box: fill-box;
}

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

.ai-text-align-bottom-icon .arrow {
  transform-origin: center;
}

.ai-text-align-bottom-icon:not(.no-hover):hover .arrow {
  animation: ai-text-align-bottom-push 700ms ease-in-out;
}

@keyframes ai-text-align-bottom-push {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="arrow" d="M3.49993 13.9C3.60588 13.8999 3.70821 13.8577 3.78313 13.7828L5.78313 11.7828C5.93895 11.6266 5.93921 11.3725 5.78313 11.2164C5.62705 11.0603 5.37297 11.0606 5.21673 11.2164L3.90032 12.5328V5.4996C3.90011 5.279 3.72053 5.09942 3.49993 5.09921C3.27915 5.09921 3.09975 5.27887 3.09954 5.4996V12.5328L1.78313 11.2164L1.71966 11.1656C1.56456 11.0634 1.35336 11.0801 1.21673 11.2164C1.08013 11.353 1.06365 11.5641 1.16595 11.7193L1.21673 11.7828L3.21673 13.7828C3.29174 13.8578 3.39384 13.9 3.49993 13.9Z" fill="currentColor"/>
        <path className="lines" d="M14.4999 6.9996C14.7761 6.9996 14.9999 6.77575 14.9999 6.4996C14.9997 6.22364 14.7759 5.9996 14.4999 5.9996H8.49993C8.22396 5.99966 8.00014 6.22367 7.99993 6.4996C7.99993 6.77571 8.22383 6.99955 8.49993 6.9996H14.4999ZM14.4999 9.9996C14.7761 9.9996 14.9999 9.77575 14.9999 9.4996C14.9997 9.22364 14.7759 8.9996 14.4999 8.9996H8.49993C8.22396 8.99966 8.00014 9.22367 7.99993 9.4996C7.99993 9.77571 8.22383 9.99955 8.49993 9.9996H14.4999ZM14.4999 12.9996C14.7761 12.9996 14.9999 12.7757 14.9999 12.4996C14.9997 12.2236 14.7759 11.9996 14.4999 11.9996H8.49993C8.22396 11.9997 8.00014 12.2237 7.99993 12.4996C7.99993 12.7757 8.22383 12.9996 8.49993 12.9996H14.4999Z" fill="currentColor"/>
      </svg>
    </>
  );
}