brand-railway-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandRailwayIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = async () => {
10      await animate(
11        ".railway-inner",
12        { opacity: 0 },
13        { duration: 0.6, ease: "linear" },
14      );
15      await animate(
16        ".railway-lower",
17        { x: [0, -3, 3, 0] },
18        { duration: 0.6, ease: "easeInOut" },
19      );
20    };
21 
22    const stop = async () => {
23      await animate(
24        ".railway-inner",
25        { opacity: 1 },
26        { duration: 0.2, ease: "linear" },
27      );
28    };
29 
30    useImperativeHandle(ref, () => ({
31      startAnimation: start,
32      stopAnimation: stop,
33    }));
34 
35    return (
36      <motion.svg
37        ref={scope}
38        onHoverStart={start}
39        onHoverEnd={stop}
40        fill={color}
41        fillRule="evenodd"
42        width={size}
43        height={size}
44        viewBox="0 0 24 24"
45        xmlns="http://www.w3.org/2000/svg"
46        className={`cursor-pointer ${className}`}
47        style={{ flex: "none", lineHeight: 1 }}
48      >
49        <title>Railway</title>
50 
51        {/* Outer shell – static */}
52        <motion.path
53          className="railway-lower"
54          d="M.111 10.27c-.057.4-.094.804-.111 1.208h18.23a2.182 2.182 0 00-.236-.346c-3.116-4.026-4.793-3.677-7.19-3.78-.8-.032-1.343-.046-4.525-.046-1.704 0-3.555.005-5.359.01-.233.63-.458 1.24-.568 1.737h9.342v1.217H.11zm18.262 2.426H.01c.02.325.05.645.094.961h16.954c.756 0 1.179-.429 1.316-.96zm-17.318 4.28S3.865 23.878 11.987 24c4.854 0 9.025-2.883 10.92-7.024H1.055z"
55        />
56 
57        {/* Inner track – animated */}
58        <motion.path
59          className="railway-inner"
60          d="M11.987 0C7.5 0 3.593 2.465 1.531 6.108c1.611-.003 4.75-.005 4.75-.005h.001v-.001c3.71 0 3.848.016 4.573.046l.45.017c1.562.052 3.484.22 4.996 1.364.82.62 2.005 1.99 2.712 2.965.653.902.84 1.94.396 2.934-.408.913-1.287 1.458-2.352 1.458H.39s.1.42.248.885h22.75a11.96 11.96 0 00.61-3.766C24 5.375 18.623 0 11.988 0z"
61        />
62      </motion.svg>
63    );
64  },
65);
66 
67BrandRailwayIcon.displayName = "BrandRailwayIcon";
68export default BrandRailwayIcon;