Logo

npx shadcn@latest add @craft/logo

import { cn } from "cn"

/**
 * Webcraftsman mark. Fills with `currentColor` and defaults to the brand
 * blue (`text-brand`, #2F3EE3) — override with e.g. `text-primary-foreground`
 * on a coloured surface. The mark is 2:1 and centres in the square `size-*` box. Decorative by default; pass `title` when it stands
 * alone as the only label.
 */
export function LogoMark({ className, title, ...props }: React.ComponentProps<"svg"> & { title?: string }) {
  return (
    <svg
      viewBox="0 0 20 10"
      fill="currentColor"
      role={title ? "img" : undefined}
      aria-hidden={title ? undefined : true}
      className={cn("size-6 shrink-0 text-brand", className)}
      {...props}
    >
      {title && <title>{title}</title>}
      <path d="M8.75401 0.162109H7.13564C6.34065 0.162109 5.7874 0.95211 6.05919 1.6992L8.48662 8.37167C8.65127 8.82427 9.08145 9.12553 9.56307 9.12553H11.1814C11.9764 9.12553 12.5297 8.33553 12.2579 7.58845L9.83046 0.915972C9.66581 0.463373 9.23563 0.162109 8.75401 0.162109Z" />
      <path d="M3.25401 0.162109H1.63564C0.840654 0.162109 0.2874 0.95211 0.559188 1.6992L2.98662 8.37167C3.15127 8.82427 3.58145 9.12553 4.06307 9.12553H5.68144C6.47643 9.12553 7.02968 8.33553 6.75789 7.58845L4.33046 0.915972C4.16581 0.463373 3.73563 0.162109 3.25401 0.162109Z" />
      <path d="M17.9983 0.160156C13.8087 0.160156 12.1414 1.55392 12.44 4.01511C12.5109 4.59922 13.2942 4.67834 13.7935 4.36699C14.4577 3.95277 15.2233 3.95277 16.1227 3.95277H18.1115C18.3988 3.95277 18.6557 3.77415 18.7558 3.50491L19.6544 1.08686C19.8213 0.637863 19.4892 0.160156 19.0102 0.160156H17.9983Z" />
      <path d="M13.4922 7.25111C13.4922 5.30078 15.6974 5.30078 15.6974 5.30078H18.1109C18.3989 5.30078 18.6563 5.4803 18.7559 5.75052L19.6591 8.20268C19.8243 8.65137 19.4921 9.12751 19.014 9.12751H15.3279C15.3279 9.12751 13.4922 9.12751 13.4922 7.25111Z" />
    </svg>
  )
}

/** Mark + "Craft" wordmark. The wordmark inherits the surrounding text colour. */
export function Logo({ className, markClassName, ...props }: React.ComponentProps<"span"> & { markClassName?: string }) {
  return (
    <span className={cn("inline-flex items-center gap-2 font-semibold tracking-tight", className)} {...props}>
      <LogoMark className={markClassName} />
      <span>Craft</span>
    </span>
  )
}