Globe 2

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

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

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

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

.ai-globe-2-icon .globe {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-globe-2-icon:not(.no-hover):hover .globe {
  animation: ai-globe-2-spin 700ms ease-in-out;
}

@keyframes ai-globe-2-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="globe" d="M7.50049 0.900055C11.1453 0.900372 14.1001 3.85576 14.1001 7.50064C14.0998 11.1453 11.1451 14.0999 7.50049 14.1003C3.8556 14.1003 0.900219 11.1455 0.899902 7.50064C0.899902 3.85556 3.85541 0.900055 7.50049 0.900055ZM10.2144 7.94986C10.1279 9.83381 9.49621 11.7024 8.30225 13.1422C10.9244 12.7728 12.9717 10.6205 13.1802 7.94986H10.2144ZM1.81885 7.94986C2.01868 10.509 3.90778 12.5919 6.37256 13.0866C5.24135 11.6536 4.64281 9.80853 4.56006 7.94986H1.81885ZM5.4624 7.94986C5.55203 9.79091 6.19192 11.5713 7.35498 12.8571C8.55873 11.5705 9.22047 9.7898 9.31299 7.94986H5.4624ZM7.35498 2.14127C6.19153 3.42699 5.55217 5.20823 5.4624 7.04947H9.31299C9.22031 5.20935 8.55911 3.42779 7.35498 2.14127ZM8.30225 1.85709C9.49629 3.29682 10.1278 5.16558 10.2144 7.04947H13.1802C12.9711 4.37932 10.9241 2.22654 8.30225 1.85709ZM6.37354 1.9108C3.90845 2.40502 2.02021 4.4904 1.81982 7.04947H4.56006C4.64297 5.19012 5.24138 3.34389 6.37354 1.9108Z" fill="currentColor"/>
      </svg>
    </>
  );
}