Server
Install
npm install @svg-animated-icons/reactCLI
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 server --reactCode
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>
</>
);
}