nfx-ui 0.20.0 → 0.22.0

package/src/animations/gamepad-icon.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GamepadIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(() => {
+      // Body scale pulse
+      animate(
+        scope.current,
+        { scale: 1.05 },
+        { duration: 0.2, ease: "easeOut" },
+      );
+
+      // D-pad shake
+      animate(
+        ".gamepad-dpad",
+        {
+          x: [0, -0.5, 0.5, -0.5, 0],
+          y: [0, 0.5, -0.5, 0.5, 0],
+        },
+        { duration: 0.4, repeat: Infinity, ease: "linear" },
+      );
+
+      // Buttons alternate pulse
+      animate(
+        ".gamepad-dot-1",
+        { opacity: [1, 0.4, 1], scale: [1, 1.2, 1] },
+        { duration: 0.6, repeat: Infinity, ease: "easeInOut" },
+      );
+      animate(
+        ".gamepad-dot-2",
+        { opacity: [1, 0.4, 1], scale: [1, 1.2, 1] },
+        { duration: 0.6, repeat: Infinity, ease: "easeInOut", delay: 0.3 },
+      );
+    }, [animate, scope]);
+
+    const stop = useCallback(() => {
+      animate(scope.current, { scale: 1 }, { duration: 0.2 });
+      animate(".gamepad-dpad", { x: 0, y: 0 }, { duration: 0.2 });
+      animate(".gamepad-dot-1", { opacity: 1, scale: 1 }, { duration: 0.2 });
+      animate(".gamepad-dot-2", { opacity: 1, scale: 1 }, { duration: 0.2 });
+    }, [animate, scope]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+        style={{ overflow: "visible" }}
+      >
+        {/* Body */}
+        <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" />
+
+        {/* D-pad Group */}
+        <motion.g className="gamepad-dpad">
+          <line x1="6" x2="10" y1="11" y2="11" />
+          <line x1="8" x2="8" y1="9" y2="13" />
+        </motion.g>
+
+        {/* Buttons */}
+        <motion.line
+          className="gamepad-dot-1"
+          x1="15"
+          x2="15.01"
+          y1="12"
+          y2="12"
+          style={{ transformOrigin: "15px 12px" }}
+        />
+        <motion.line
+          className="gamepad-dot-2"
+          x1="18"
+          x2="18.01"
+          y1="10"
+          y2="10"
+          style={{ transformOrigin: "18px 10px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+GamepadIcon.displayName = "GamepadIcon";
+export default GamepadIcon;

package/src/animations/gauge-icon.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GaugeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".needle",
+        { rotate: [0, 45, -20, 30, 0] },
+        { duration: 0.8, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(".needle", { rotate: 0 }, { duration: 0.3, ease: "easeInOut" });
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <path d="M3.34 19a10 10 0 1 1 17.32 0" />
+        <motion.path
+          className="needle"
+          style={{ transformOrigin: "12px 14px" }}
+          d="m12 14 4-4"
+        />
+      </motion.svg>
+    );
+  },
+);
+
+GaugeIcon.displayName = "GaugeIcon";
+export default GaugeIcon;

package/src/animations/gear-icon.tsx

@@ -0,0 +1,86 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { scaledStrokeWidth } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GearIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = () => {
+      animate(".gear-body", { scale: [1, 1.02, 1] }, { duration: 0.6 });
+
+      animate(
+        ".gear-center",
+        { scale: [1, 1.1, 1] },
+        { duration: 0.3, ease: "easeOut" },
+      );
+
+      animate(
+        ".gear-rotator",
+        { rotate: 360 },
+        { duration: 0.9, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".gear-rotator", { rotate: 0 }, { duration: 0.2 });
+      animate(".gear-center", { scale: 1 }, { duration: 0.2 });
+      animate(".gear-body", { scale: 1 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 32 32"
+        fill="none"
+        stroke={color}
+        strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+        strokeLinecap="square"
+        strokeMiterlimit="10"
+        className={`cursor-pointer ${className}`}
+        style={{ overflow: "visible" }}
+      >
+        {/* Rotating group */}
+        <motion.g
+          className="gear-rotator"
+          style={{
+            transformOrigin: "50% 50%",
+            transformBox: "fill-box",
+          }}
+        >
+          <motion.circle className="gear-center" cx="16" cy="16" r="5" />
+
+          <motion.path
+            className="gear-body"
+            d="m30,17.5v-3l-3.388-1.355c-.25-.933-.617-1.815-1.089-2.633l1.436-3.351-2.121-2.121-3.351,1.436c-.817-.472-1.7-.838-2.633-1.089l-1.355-3.388h-3l-1.355,3.388c-.933.25-1.815.617-2.633,1.089l-3.351-1.436-2.121,2.121 1.436,3.351c-.472.817-.838,1.7-1.089,2.633l-3.388,1.355v3l3.388,1.355c.25.933.617,1.815,1.089,2.633l-1.436,3.351 2.121,2.121 3.351-1.436c.817.472 1.7.838 2.633,1.089l1.355,3.388h3l1.355-3.388c.933-.25 1.815-.617 2.633-1.089l3.351,1.436 2.121-2.121-1.436-3.351c.472-.817.838-1.7 1.089-2.633l3.388-1.355Z"
+          />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+GearIcon.displayName = "GearIcon";
+export default GearIcon;

package/src/animations/ghost-icon.tsx

@@ -0,0 +1,98 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GhostIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // floating + wiggle
+      animate(
+        ".ghost-body",
+        {
+          y: [0, -8, -4, -8, 0],
+          rotate: [0, -3, 3, -2, 0],
+        },
+        { duration: 1.2, ease: "easeInOut" },
+      );
+
+      // eyes blink
+      animate(
+        ".ghost-eye",
+        {
+          scaleY: [1, 0.1, 1, 0.1, 1],
+          scaleX: [1, 1.2, 1, 1.2, 1],
+        },
+        { duration: 0.8, ease: "easeInOut" },
+      );
+
+      // wavy bottom
+      await animate(
+        ".ghost-body",
+        { scaleX: [1, 1.05, 0.98, 1.02, 1] },
+        { duration: 0.6, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".ghost-body", { y: 0, rotate: 0, scaleX: 1 }, { duration: 0.2 });
+      animate(".ghost-eye", { scaleX: 1, scaleY: 1 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path
+          className="ghost-body"
+          style={{ transformOrigin: "12px 14px" }}
+          d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"
+        />
+        <motion.path
+          className="ghost-eye"
+          style={{ transformOrigin: "10px 10px" }}
+          d="M10 10h.01"
+        />
+        <motion.path
+          className="ghost-eye"
+          style={{ transformOrigin: "14px 10px" }}
+          d="M14 10h.01"
+        />
+      </motion.svg>
+    );
+  },
+);
+
+GhostIcon.displayName = "GhostIcon";
+
+export default GhostIcon;

package/src/animations/github-copilot-icon.tsx

@@ -0,0 +1,79 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GithubCopilotIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".eye-left",
+        { scaleY: [1, 0.1, 1] },
+        { duration: 0.3, ease: "easeInOut" },
+      );
+      animate(
+        ".eye-right",
+        { scaleY: [1, 0.1, 1] },
+        { duration: 0.3, ease: "easeInOut", delay: 0.1 },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".eye-left, .eye-right",
+        { scaleY: 1 },
+        { duration: 0.2, ease: "easeOut" },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.div
+        ref={scope}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M4 18v-5.5c0 -.667 .167 -1.333 .5 -2" />
+          <path d="M12 7.5c0 -1 -.01 -4.07 -4 -3.5c-3.5 .5 -4 2.5 -4 3.5c0 1.5 0 4 3 4c4 0 5 -2.5 5 -4z" />
+          <path d="M4 12c-1.333 .667 -2 1.333 -2 2c0 1 0 3 1.5 4c3 2 6.5 3 8.5 3s5.499 -1 8.5 -3c1.5 -1 1.5 -3 1.5 -4c0 -.667 -.667 -1.333 -2 -2" />
+          <path d="M20 18v-5.5c0 -.667 -.167 -1.333 -.5 -2" />
+          <path d="M12 7.5l0 -.297l.01 -.269l.027 -.298l.013 -.105l.033 -.215c.014 -.073 .029 -.146 .046 -.22l.06 -.223c.336 -1.118 1.262 -2.237 3.808 -1.873c2.838 .405 3.703 1.797 3.93 2.842l.036 .204c0 .033 .01 .066 .013 .098l.016 .185l0 .171l0 .49l-.015 .394l-.02 .271c-.122 1.366 -.655 2.845 -2.962 2.845c-3.256 0 -4.524 -1.656 -4.883 -3.081l-.053 -.242a3.865 3.865 0 0 1 -.036 -.235l-.021 -.227a3.518 3.518 0 0 1 -.007 -.215z" />
+          <motion.path
+            className="eye-left"
+            d="M10 15v2"
+            style={{ transformOrigin: "10px 16px" }}
+          />
+          <motion.path
+            className="eye-right"
+            d="M14 15v2"
+            style={{ transformOrigin: "14px 16px" }}
+          />
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+GithubCopilotIcon.displayName = "GithubCopilotIcon";
+export default GithubCopilotIcon;

package/src/animations/github-icon.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GithubIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".github-icon",
+        { scale: [1, 1.1, 1], rotate: [0, -5, 5, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(
+        ".github-icon",
+        { scale: 1, rotate: 0 },
+        { duration: 0.2, ease: "easeOut" },
+      );
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.g className="github-icon" style={{ transformOrigin: "center" }}>
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+GithubIcon.displayName = "GithubIcon";
+
+export default GithubIcon;

package/src/animations/gitlab-icon.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GitlabIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      await animate(
+        ".gitlab-icon",
+        { scale: [1, 1.1, 1], rotate: [0, -5, 5, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".gitlab-icon",
+        { scale: 1, rotate: 0 },
+        { duration: 0.2, ease: "easeOut" },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.div
+        ref={scope}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <motion.g
+            className="gitlab-icon"
+            style={{ transformOrigin: "center" }}
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+GitlabIcon.displayName = "GitlabIcon";
+export default GitlabIcon;

package/src/animations/globe-icon.tsx

@@ -0,0 +1,97 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { scaledStrokeWidth } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const GlobeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
+
+    const start = async () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
+      animationControls.current.push(
+        animate(
+          ".globe-circle",
+          { rotate: 360 },
+          { duration: 2, ease: "linear", repeat: Infinity },
+        ),
+      );
+    };
+
+    const stop = () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
+      animate(".globe-circle", { rotate: 0 }, { duration: 0.5 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.div
+        ref={scope}
+        className={`inline-flex cursor-pointer ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 48)}
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        >
+          <motion.g
+            className="globe-circle"
+            style={{ transformOrigin: "23px 19px" }}
+          >
+            <motion.path
+              className="globe-continent-1"
+              d="M36.6225 22.1264C34.6145 19.2959 32.3651 15.7913 28.4377 17.3428C24.4307 18.9257 30.0493 23.15 25.2064 26.9189C22.1135 29.3259 22.8515 31.6477 23.9478 33"
+            />
+
+            <motion.path
+              className="globe-continent-2"
+              d="M14 30L15.336 28.0984C16.3999 26.5841 16.557 24.5077 15.7357 22.8151L15.5751 22.4842C14.5131 20.2955 15.1651 17.5604 17.0607 16.253L17.3292 16.0677C18.2109 15.4596 18.808 14.4478 18.9613 13.3023C19.1316 12.0291 18.7338 10.7433 17.8962 9.85981L15.3599 7.24048"
+            />
+
+            <motion.path
+              className="globe-continent-3"
+              d="M23.0628 5C22.3771 9.64991 27.3946 14.948 33.7332 10.0381"
+            />
+
+            <motion.path
+              className="globe-outline"
+              d="M23 33C30.732 33 37 26.732 37 19C37 11.268 30.732 5 23 5C15.268 5 9 11.268 9 19C9 26.732 15.268 33 23 33Z"
+            />
+          </motion.g>
+
+          <motion.path className="globe-stand-stem" d="M23 43V38" />
+
+          <motion.path className="globe-stand-base" d="M16 43H30" />
+
+          <motion.path
+            className="globe-axis"
+            d="M38 3.99994L36.435 5.56491C43.855 12.9849 43.855 25.015 36.435 32.435C29.0151 39.8549 16.9849 39.8549 9.56497 32.435L7.99997 34"
+          />
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+GlobeIcon.displayName = "GlobeIcon";
+export default GlobeIcon;