← Back

Server

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
FlagDescription
--dest <dir>Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI
npx @svg-animated-icons/cli add server --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 ServerIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-server-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

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

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

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

.ai-server-icon .led-top,
.ai-server-icon .led-bottom {
  transform-origin: center;
}

.ai-server-icon:not(.no-hover):hover .led-top {
  animation: ai-server-blink 700ms ease-in-out;
}

.ai-server-icon:not(.no-hover):hover .led-bottom {
  animation: ai-server-blink 700ms ease-in-out 200ms;
}

@keyframes ai-server-blink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="rack-bottom" fillRule="evenodd" d="M12.6533 8.00781C13.4097 8.08461 14 8.72334 14 9.5V11.5L13.9922 11.6533C13.9205 12.3593 13.3593 12.9205 12.6533 12.9922L12.5 13H2.5L2.34668 12.9922C1.64069 12.9205 1.07949 12.3593 1.00781 11.6533L1 11.5V9.5C1 8.72334 1.59028 8.08461 2.34668 8.00781L2.5 8H12.5L12.6533 8.00781ZM2.5 9C2.22386 9 2 9.22386 2 9.5V11.5C2 11.7761 2.22386 12 2.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H2.5Z" fill="currentColor"/>
        <path className="led-bottom" d="M3.5 10C3.77614 10 4 10.2239 4 10.5C4 10.7761 3.77614 11 3.5 11C3.22386 11 3 10.7761 3 10.5C3 10.2239 3.22386 10 3.5 10Z" fill="currentColor"/>
        <path className="rack-top" fillRule="evenodd" d="M12.6533 2.00781C13.4097 2.08461 14 2.72334 14 3.5V5.5L13.9922 5.65332C13.9205 6.35931 13.3593 6.92051 12.6533 6.99219L12.5 7H2.5L2.34668 6.99219C1.64069 6.92051 1.07949 6.35931 1.00781 5.65332L1 5.5V3.5C1 2.72334 1.59028 2.08461 2.34668 2.00781L2.5 2H12.5L12.6533 2.00781ZM2.5 3C2.22386 3 2 3.22386 2 3.5V5.5C2 5.77614 2.22386 6 2.5 6H12.5C12.7761 6 13 5.77614 13 5.5V3.5C13 3.22386 12.7761 3 12.5 3H2.5Z" fill="currentColor"/>
        <path className="led-top" d="M3.5 4C3.77614 4 4 4.22386 4 4.5C4 4.77614 3.77614 5 3.5 5C3.22386 5 3 4.77614 3 4.5C3 4.22386 3.22386 4 3.5 4Z" fill="currentColor"/>
      </svg>
    </>
  );
}