Icons

Aura UI ships a set of brand icons for every OAuth provider Aura Auth supports, used across sign-in and sign-up blocks. They're plain SVG components.

Installation

Install icons individually, the same way as any other component. For example, the GitHub icon:

npx shadcn add https://aura-stack-ui.vercel.app/r/github.json

Copy and paste the icon component into your project

import type { ComponentProps } from "react"

export interface GitHubIconProps extends Omit<ComponentProps<"svg">, "width" | "height" | "color"> {
  size?: number | string
  color?: string
}

export const GitHubIcon = ({ size = 24, color = "currentColor", className, style, ...props }: GitHubIconProps) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      width={size}
      height={size}
      fill="none"
      aria-hidden="true"
      focusable="false"
      className={className}
      style={{
        display: "inline-block",
        verticalAlign: "middle",
        flexShrink: 0,
        ...style,
      }}
      {...props}
    >
      <path
        fill={color}
        fillRule="evenodd"
        clipRule="evenodd"
        d="M258.934 42.667c-119.59 0-216.267 97.239-216.267 217.538c0 96.161 61.944 177.559 147.877 206.369c10.744 2.166 14.68-4.681 14.68-10.44c0-5.043-.354-22.33-.354-40.341c-60.161 12.968-72.689-25.932-72.689-25.932c-9.668-25.212-23.993-31.691-23.993-31.691c-19.69-13.327 1.434-13.327 1.434-13.327c21.842 1.441 33.303 22.33 33.303 22.33c19.332 33.132 50.484 23.771 63.016 18.007c1.788-14.047 7.521-23.771 13.608-29.172c-47.982-5.043-98.466-23.771-98.466-107.33c0-23.771 8.588-43.219 22.196-58.344c-2.147-5.401-9.668-27.735 2.152-57.628c0 0 18.26-5.763 59.434 22.33a208.3 208.3 0 0 1 54.069-7.205c18.261 0 36.876 2.524 54.065 7.205c41.178-28.093 59.439-22.33 59.439-22.33c11.82 29.893 4.294 52.227 2.147 57.628c13.967 15.125 22.2 34.573 22.2 58.344c0 83.559-50.483 101.924-98.824 107.33c7.88 6.842 14.68 19.806 14.68 40.337c0 29.172-.355 52.584-.355 59.785c0 5.763 3.94 12.61 14.68 10.448c85.933-28.818 147.877-110.212 147.877-206.373c.355-120.299-96.677-217.538-215.909-217.538"
      />
    </svg>
  )
}

GitHubIcon.displayName = "GitHubIcon"

export default GitHubIcon

Usage

components/ui/sign-in-with-github.tsx

import { Button } from "@/components/ui/button"
import { GitHubIcon } from "@/components/icons/github"

export default function SignInWithGitHub() {
  return (
    <Button variant="outline">
      <GitHubIcon className="mr-2 h-4 w-4" />
      Sign in with GitHub
    </Button>
  )
}