Github Logo

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

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

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

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

.ai-github-logo-icon .logo {
  transform-origin: center;
}

.ai-github-logo-icon:not(.no-hover):hover .logo {
  animation: ai-github-logo-motion 700ms ease-in-out;
}

@keyframes ai-github-logo-motion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="logo" d="M7.49902 0.25C11.5033 0.25 14.7499 3.4958 14.75 7.5C14.75 10.7023 12.6746 13.418 9.7959 14.3789C9.42852 14.4496 9.29802 14.2242 9.29785 14.0303C9.29785 13.7926 9.30664 13.0099 9.30664 12.041C9.30657 11.3647 9.07434 10.9221 8.81445 10.6982C10.4292 10.5189 12.125 9.90632 12.125 7.12109C12.125 6.32946 11.8444 5.68268 11.3799 5.17578C11.4542 4.99237 11.7023 4.25509 11.3066 3.25684C11.2917 3.25225 10.6824 3.07392 9.31543 4C8.73639 3.83933 8.11598 3.75897 7.5 3.75586C6.88373 3.75899 6.26356 3.83939 5.68555 4C4.30048 3.06223 3.69141 3.25684 3.69141 3.25684C3.29667 4.25506 3.54533 4.99237 3.62012 5.17578C3.15651 5.68268 2.87402 6.32946 2.87402 7.12109C2.87404 9.89919 4.56694 10.5207 6.17676 10.7041C5.96986 10.8852 5.78272 11.2049 5.7168 11.6729C5.3038 11.8584 4.25315 12.1788 3.60645 11.0713C3.60645 11.0713 3.2236 10.3756 2.49609 10.3242C2.49609 10.3242 1.78803 10.3151 2.44629 10.7646C2.46065 10.7715 2.92629 11.0006 3.25098 11.8252C3.25565 11.8405 3.6878 13.2324 5.69336 12.7969C5.69692 13.4017 5.70312 13.858 5.70312 14.0303C5.70295 14.2225 5.57051 14.4462 5.20801 14.3799C2.32708 13.4207 0.25 10.7027 0.25 7.5C0.250136 3.49591 3.49627 0.250167 7.49902 0.25Z" fill="currentColor"/>
      </svg>
    </>
  );
}