Text Align Middle

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

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

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

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

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

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

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

@keyframes ai-text-align-middle-converge-top {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

@keyframes ai-text-align-middle-converge-bottom {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="arrow-top" d="M3.49991 5.89999C3.60585 5.89989 3.70819 5.85773 3.78311 5.78281L5.78311 3.78281C5.93893 3.62656 5.93919 3.37248 5.78311 3.2164C5.62703 3.06032 5.37294 3.06058 5.2167 3.2164L3.9003 4.53281V0.499603L3.89151 0.418549C3.85394 0.236784 3.69276 0.0993977 3.49991 0.0992126C3.27912 0.0992126 3.09973 0.278869 3.09952 0.499603V4.53281L1.78311 3.2164L1.71963 3.16562C1.56454 3.06335 1.35334 3.08014 1.2167 3.2164C1.08011 3.353 1.06363 3.5641 1.16592 3.71933L1.2167 3.78281L3.2167 5.78281C3.29172 5.85782 3.39382 5.89999 3.49991 5.89999Z" fill="currentColor"/>
        <path className="lines" d="M14.4999 4.9996C14.776 4.9996 14.9999 4.77575 14.9999 4.4996C14.9997 4.22364 14.7759 3.9996 14.4999 3.9996H8.49991C8.22394 3.99966 8.00012 4.22367 7.99991 4.4996C7.99991 4.77571 8.22381 4.99955 8.49991 4.9996H14.4999ZM14.4999 7.9996C14.776 7.9996 14.9999 7.77575 14.9999 7.4996C14.9997 7.22364 14.7759 6.9996 14.4999 6.9996H8.49991C8.22394 6.99966 8.00012 7.22367 7.99991 7.4996C7.99991 7.77571 8.22381 7.99955 8.49991 7.9996H14.4999ZM14.4999 10.9996C14.776 10.9996 14.9999 10.7757 14.9999 10.4996C14.9997 10.2236 14.7759 9.9996 14.4999 9.9996H8.49991C8.22394 9.99966 8.00012 10.2237 7.99991 10.4996C7.99991 10.7757 8.22381 10.9996 8.49991 10.9996H14.4999Z" fill="currentColor"/>
        <path className="arrow-bottom" d="M3.49991 14.9C3.69286 14.8998 3.85405 14.7626 3.89151 14.5807L3.9003 14.4996V10.4664L5.2167 11.7828C5.37291 11.939 5.6269 11.939 5.78311 11.7828C5.93893 11.6266 5.93919 11.3725 5.78311 11.2164L3.78311 9.2164C3.70819 9.14148 3.60585 9.09932 3.49991 9.09921C3.394 9.09921 3.29168 9.14163 3.2167 9.2164L1.2167 11.2164L1.16592 11.2799C1.06356 11.4351 1.08008 11.6462 1.2167 11.7828C1.35333 11.9194 1.56439 11.936 1.71963 11.8336L1.78311 11.7828L3.09952 10.4664V14.4996C3.09952 14.7205 3.27899 14.9 3.49991 14.9Z" fill="currentColor"/>
      </svg>
    </>
  );
}