Track Next

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

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

.ai-track-next-icon * {
  transform-box: fill-box;
}

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

.ai-track-next-icon .triangle {
  transform-origin: center;
}

.ai-track-next-icon:not(.no-hover):hover .triangle {
  animation: ai-track-next-push 700ms ease-in-out;
}

@keyframes ai-track-next-push {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="triangle" fillRule="evenodd" d="M2.73334 2.3073C2.57845 2.22563 2.39212 2.23159 2.24213 2.32195C2.09212 2.41239 2.00003 2.57453 1.99994 2.74968V12.2497C1.99994 12.4249 2.09212 12.5869 2.24213 12.6774C2.39217 12.7679 2.57839 12.7738 2.73334 12.6921L11.7333 7.94206C11.83 7.89103 11.9046 7.81069 11.9501 7.7155C11.9046 7.81069 11.83 7.89103 11.7333 7.94206L2.73334 12.6921C2.57839 12.7738 2.39217 12.7679 2.24213 12.6774C2.09212 12.5869 1.99994 12.4249 1.99994 12.2497V2.74968C2.00003 2.57453 2.09212 2.41239 2.24213 2.32195C2.39212 2.23159 2.57845 2.22563 2.73334 2.3073L11.7333 7.0573C11.8299 7.10825 11.9046 7.18882 11.9501 7.28386L11.7333 7.0573L2.73334 2.3073ZM2.99994 11.4196L10.4277 7.49968L2.99994 3.57878V11.4196Z" fill="currentColor"/>
        <path className="bar" d="M12.4999 2.19987C12.8036 2.19987 13.0496 2.44601 13.0497 2.74968V12.2497C13.0497 12.5534 12.8037 12.7995 12.4999 12.7995C12.1963 12.7994 11.9501 12.5534 11.9501 12.2497V2.74968C11.9502 2.44609 12.1964 2.20001 12.4999 2.19987Z" fill="currentColor"/>
      </svg>
    </>
  );
}