Logo

PreviousNext

A logo component.

Docs
alpineblock

Preview

Loading preview…
registry/alpine/branding/logo.tsx
import { cn } from "@/lib/utils"

export function Logo({ className }: React.ComponentProps<"svg">) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 180 50"
      className={cn("text-foreground h-6", className)}
    >
      <path
        fill="currentColor"
        d="M25.802 36.75c-3.5-1.3-7.1-1.5-10.4-.6-2.3.6-4.5 1.8-6.5 3.3l-1.4 1.2-.4.4.9.8c.1 0 .1.1.2.2.2.2.4.3.7.5l.6.4.6-.5c.1-.1.3-.3.5-.4 1.8-1.5 3.8-2.5 5.9-3 2.7-.7 5.6-.6 8.5.5 2.4.9 7.3 2 13.2-.5l.2-.1.3-.3c0-.1.1-.1.2-.2.5-.6 1-1.2 1.4-1.9l2-3.1-3.2 1.8c-4.7 2.6-9 3.1-13.3 1.5ZM12.1 25.95c2.7-.7 5.6-.6 8.5.5 3.2 1.2 11.4 2.9 20.6-5.4l1.5-1.5.1-.1.4-.4-.2-.5c-.1-.4-.3-.9-.5-1.4l-.5-1.4-1 1c-.1.2-.3.3-.5.5-4.4 4.5-11.2 9.1-19 6.3-3.5-1.3-7.1-1.5-10.4-.6-3.2.9-6 2.6-8.6 5v-.1L1 29.45c0 .1-.1.1-.2.2l-.3.3.1.4c.1.5.3 1 .4 1.5l.6 1.6 1-1.3c.1-.2.3-.3.4-.5 2.1-1.9 5-4.6 9.1-5.7Z"
      />
      <path
        fill="currentColor"
        d="M2.4 24.15c2.3-2.4 4.9-3.9 7.7-4.7 2.7-.7 5.6-.6 8.5.5 9 3.3 16.8-2.1 20.2-5l1.3-1.3.5-.4-.4-.6c-.3-.3-.5-.7-.8-1.1l-.6-.8-.7.7-.4.4c-4.2 4-10.7 8.1-18.1 5.3-3.5-1.3-7.1-1.5-10.4-.6-2.1.6-4.1 1.6-6.1 2.9L1 21.15l-.5.5-.2.2v.3c-.1.7-.1 1.4-.2 2l-.1 2.5 1.7-1.8c.2-.2.4-.5.7-.7ZM28.698 43.55l-.2.6.2-.6c-.3-.1-.5-.2-.8-.3-3.5-1.3-7.1-1.5-10.4-.6-.7.2-1.4.4-2.1.7l-2.4 1.1-.6.3 2 .7 1.8.6.3.1.3-.1c.3-.1.6-.3.9-.3.2 0 .4-.1.6-.2 2.4-.6 5-.6 7.8.3.3.1.5.2.8.3l.5.2.3-.1c.7-.2 1.5-.4 2.1-.7l2.8-1-2.9-.7c-.3-.1-.7-.2-1-.3ZM43.997 22.85l-1.5 1.5-.6.6c-4.1 3.9-10.7 8.1-18.1 5.3-3.5-1.3-7.1-1.5-10.4-.6-3.1.9-5.9 2.5-8.4 4.9l-1.3 1.4-.4.5.4.6c.3.4.5.7.7 1.1l.6.9.7-.9.4-.4c2.4-2.6 5-4.2 8-5 2.7-.7 5.6-.6 8.5.5 2.5.9 5.1 1.2 7.7.9 4.6-.5 9.2-3.1 12.6-6 .2-.2.4-.3.6-.5l.3-.3v-.3c0-.6.1-1.3.1-1.9l.1-2.3Z"
      />
      <path
        fill="currentColor"
        d="m6.003 13.65-.3-.6.3.6c.6-.3 1.3-.5 1.9-.7 2.7-.7 5.6-.6 8.5.5 1.9.7 3.8 1 5.9 1 4.2 0 8.4-1.5 12.3-4.4l1.5-1.2.5-.4-.9-.7c-.3-.3-.7-.6-1.1-.8l-.6-.4-.5.4c-.2.1-.3.3-.5.4-5.3 4-10.6 5.1-15.6 3.2-3.6-1.3-7.2-1.6-10.8-.5-.3.1-.6.2-1 .3l-.2.1-.3.3c0 .1-.1.1-.2.2-.4.6-.9 1.1-1.3 1.7l-1.9 2.9 3.1-1.6c.5 0 .9-.2 1.2-.3ZM14.2 6.85l.3.1c1.3.5 3.3 1 5.8 1 2.6 0 5.1-.6 7.6-1.6l3.1-1.5-2.1-.7c-.6-.2-1.2-.4-1.9-.5h-.3l-.3.1c-.3.1-.6.3-.9.4-3 1.1-6 1.3-8.9.5l-.9-.3-.3-.1-.3.1c-.6.2-1.2.4-1.8.7l-2.3 1 2.4.7c.2-.1.5 0 .8.1Z"
      />
      <path
        fill="currentColor"
        d="M56.392 38.756c-.384 0-.696-.132-.936-.396-.24-.264-.36-.732-.36-1.404 0-.504.156-1.32.468-2.448a70.61 70.61 0 0 1 1.332-4.032 180.487 180.487 0 0 1 1.908-4.86c.72-1.728 1.464-3.444 2.232-5.148a98.268 98.268 0 0 1 2.268-4.716c.744-1.464 1.428-2.7 2.052-3.708.624-1.008 1.152-1.668 1.584-1.98.504-.36.972-.54 1.404-.54.24 0 .48.024.72.072.24.048.444.132.612.252.432.264.804.852 1.116 1.764.336.888.624 1.98.864 3.276.24 1.272.432 2.64.576 4.104.168 1.44.312 2.868.432 4.284.72-.096 1.32-.168 1.8-.216.48-.048.828-.072 1.044-.072.816 0 1.332.108 1.548.324.216.216.336.468.36.756.048.432-.072.816-.36 1.152-.288.336-.696.588-1.224.756-.168.048-.528.132-1.08.252-.528.096-1.164.216-1.908.36.024.72.036 1.392.036 2.016.024.6.036 1.116.036 1.548 0 2.184-.132 3.828-.396 4.932-.264 1.08-.588 1.812-.972 2.196-.384.384-.756.576-1.116.576-.432 0-.732-.12-.9-.36-.168-.264-.252-.636-.252-1.116v-2.556c0-.888-.012-1.896-.036-3.024 0-1.152-.012-2.364-.036-3.636-1.416.24-2.856.468-4.32.684-1.44.216-2.688.408-3.744.576a118.721 118.721 0 0 0-1.368 3.708c-.384 1.08-.648 1.908-.792 2.484-.36 1.2-.684 2.1-.972 2.7-.288.576-.564.96-.828 1.152a1.24 1.24 0 0 1-.792.288Zm5.976-13.536a213.21 213.21 0 0 1 3.564-.792 101.03 101.03 0 0 1 3.168-.612 97.186 97.186 0 0 0-.396-6.192c-.168-1.992-.42-3.564-.756-4.716-.456.792-.996 1.848-1.62 3.168a146.44 146.44 0 0 0-1.98 4.392 398.759 398.759 0 0 0-1.98 4.752Zm27.009 14.22c-1.848 0-3.3-.6-4.356-1.8-1.032-1.224-1.548-2.928-1.548-5.112 0-1.344.18-2.916.54-4.716a84.065 84.065 0 0 1 1.44-5.76c.6-2.04 1.248-4.056 1.944-6.048s1.368-3.84 2.016-5.544c.672-1.728 1.26-3.168 1.764-4.32.288-.648.696-.972 1.224-.972.72 0 1.08.444 1.08 1.332 0 .288-.132.876-.396 1.764s-.612 1.992-1.044 3.312c-.432 1.296-.9 2.736-1.404 4.32-.504 1.584-1.02 3.216-1.548 4.896-.504 1.656-.972 3.3-1.404 4.932a59.799 59.799 0 0 0-1.044 4.536c-.264 1.416-.396 2.628-.396 3.636 0 .648.168 1.164.504 1.548.36.36.84.54 1.44.54a9.031 9.031 0 0 0 3.312-.648 20.6 20.6 0 0 0 3.24-1.656 43.186 43.186 0 0 0 2.808-1.98 76.465 76.465 0 0 1 2.196-1.656c.6-.456 1.02-.684 1.26-.684.528 0 .792.288.792.864 0 .192-.192.552-.576 1.08-.384.504-.9 1.104-1.548 1.8a28.593 28.593 0 0 1-2.268 2.16 32.62 32.62 0 0 1-2.664 2.052 14.992 14.992 0 0 1-2.772 1.512c-.912.408-1.776.612-2.592.612Zm10.963 9.252c-.408 0-.732-.144-.972-.432-.216-.288-.324-.84-.324-1.656 0-1.176.084-2.544.252-4.104.168-1.56.396-3.216.684-4.968.312-1.752.648-3.504 1.008-5.256.384-1.752.78-3.42 1.188-5.004a80.079 80.079 0 0 1 1.26-4.212c.408-1.248.78-2.232 1.116-2.952.36-.72.672-1.08.936-1.08.456 0 .816.132 1.08.396.288.264.432.66.432 1.188 0 .672-.204 1.764-.612 3.276a1615.07 1615.07 0 0 0-1.584 5.832c.6-1.104 1.248-2.256 1.944-3.456a57.151 57.151 0 0 1 2.196-3.492 34.627 34.627 0 0 1 2.304-3.096c.792-.912 1.56-1.644 2.304-2.196.744-.552 1.464-.828 2.16-.828.744 0 1.404.24 1.98.72.576.456 1.02 1.08 1.332 1.872.336.768.504 1.632.504 2.592 0 1.992-.336 3.924-1.008 5.796a17.358 17.358 0 0 1-2.808 5.004 13.533 13.533 0 0 1-4.176 3.492c-1.584.864-3.3 1.296-5.148 1.296a14.588 14.588 0 0 1-3.312-.36 207.138 207.138 0 0 0-.828 4.896c-.264 1.68-.528 3.468-.792 5.364-.072.504-.192.852-.36 1.044-.168.216-.42.324-.756.324Zm16.02-29.304c-.504 0-1.104.288-1.8.864-.672.576-1.404 1.344-2.196 2.304a46.256 46.256 0 0 0-2.34 3.132 86.407 86.407 0 0 0-2.304 3.456 397.316 397.316 0 0 0-2.052 3.276c-.6 1.008-1.092 1.848-1.476 2.52 1.872-.048 3.516-.42 4.932-1.116 1.416-.72 2.628-1.632 3.636-2.736a15.606 15.606 0 0 0 2.448-3.636c.648-1.32 1.116-2.592 1.404-3.816.288-1.248.432-2.328.432-3.24 0-.672-.228-1.008-.684-1.008Zm8.145 18.792c-.456 0-.864-.168-1.224-.504-.36-.36-.54-.912-.54-1.656 0-.528.072-1.26.216-2.196.144-.96.336-2.004.576-3.132.24-1.128.492-2.244.756-3.348.288-1.128.576-2.136.864-3.024.288-.888.54-1.548.756-1.98.192-.336.372-.552.54-.648.192-.096.372-.144.54-.144.336 0 .624.108.864.324.264.216.396.636.396 1.26 0 .36-.072.96-.216 1.8a63.07 63.07 0 0 1-.504 2.88c-.192 1.08-.408 2.196-.648 3.348a193.209 193.209 0 0 1-.648 3.24 76.458 76.458 0 0 0-.504 2.592c-.096.384-.264.684-.504.9a1.058 1.058 0 0 1-.72.288Zm3.528-19.908c-.552 0-1.08-.168-1.584-.504-.48-.336-.72-.876-.72-1.62 0-.624.144-1.128.432-1.512.312-.384.672-.66 1.08-.828.432-.192.804-.288 1.116-.288.312 0 .66.072 1.044.216.408.12.756.36 1.044.72.288.336.432.84.432 1.512 0 .456-.156.864-.468 1.224a3.29 3.29 0 0 1-1.152.792c-.432.192-.84.288-1.224.288Zm8.116 18.9c-.696 0-1.32-.396-1.872-1.188-.552-.792-.828-1.812-.828-3.06 0-1.368.18-2.832.54-4.392.384-1.56.852-3.144 1.404-4.752a508.72 508.72 0 0 1 1.62-4.716c.12-.312.288-.54.504-.684.24-.168.6-.252 1.08-.252.864 0 1.296.42 1.296 1.26 0 .192-.096.624-.288 1.296-.192.672-.444 1.5-.756 2.484-.288.984-.588 2.052-.9 3.204a54.59 54.59 0 0 0-.828 3.42 30.156 30.156 0 0 0-.504 3.204c.384-.408.816-1.032 1.296-1.872a80.318 80.318 0 0 0 1.62-2.844 109.14 109.14 0 0 1 1.8-3.24 41.69 41.69 0 0 1 1.872-3.024c.648-.936 1.272-1.68 1.872-2.232.624-.576 1.2-.864 1.728-.864.768 0 1.416.24 1.944.72.552.456.972 1.272 1.26 2.448.312 1.152.468 2.784.468 4.896 0 1.128.108 2.184.324 3.168.24.984.612 1.776 1.116 2.376.528.576 1.2.864 2.016.864 1.224 0 2.316-.216 3.276-.648.96-.456 1.788-.96 2.484-1.512a41.45 41.45 0 0 0 1.8-1.512c.48-.456.852-.684 1.116-.684.552 0 .828.288.828.864 0 .24-.18.624-.54 1.152-.336.504-.816 1.08-1.44 1.728-.6.624-1.296 1.236-2.088 1.836a12.186 12.186 0 0 1-2.484 1.44 6.415 6.415 0 0 1-2.628.576c-1.656 0-3.012-.324-4.068-.972-1.032-.648-1.8-1.716-2.304-3.204-.48-1.488-.72-3.48-.72-5.976 0-1.368-.084-2.364-.252-2.988-.144-.648-.42-1.08-.828-1.296-.288.504-.66 1.224-1.116 2.16-.456.912-.984 1.932-1.584 3.06a96.427 96.427 0 0 1-1.836 3.42 41.541 41.541 0 0 1-1.908 3.132c-.648.96-1.272 1.74-1.872 2.34-.6.576-1.14.864-1.62.864Zm39.739-14.688c0 .768-.24 1.524-.72 2.268-.48.72-1.116 1.416-1.908 2.088a22.086 22.086 0 0 1-2.628 1.836 27.68 27.68 0 0 1-2.88 1.512c-.96.432-1.836.78-2.628 1.044-.192.936-.288 1.764-.288 2.484 0 .456.108.78.324.972.216.192.552.288 1.008.288 1.008 0 2.076-.18 3.204-.54 1.128-.36 2.28-.828 3.456-1.404a45.317 45.317 0 0 0 3.384-1.836 99.872 99.872 0 0 0 2.952-1.836c.912-.576 1.668-1.044 2.268-1.404.6-.36.996-.54 1.188-.54.288 0 .504.096.648.288a.833.833 0 0 1 .252.612c0 .192-.3.564-.9 1.116-.576.552-1.356 1.2-2.34 1.944a56.289 56.289 0 0 1-3.312 2.232 49.01 49.01 0 0 1-3.816 2.16 26.323 26.323 0 0 1-3.78 1.62c-1.2.408-2.28.612-3.24.612-1.248 0-2.22-.468-2.916-1.404-.696-.936-1.044-2.388-1.044-4.356 0-1.32.168-2.652.504-3.996.36-1.344.84-2.628 1.44-3.852.624-1.248 1.308-2.352 2.052-3.312.768-.984 1.572-1.752 2.412-2.304.84-.576 1.656-.864 2.448-.864 1.512 0 2.7.42 3.564 1.26.864.84 1.296 1.944 1.296 3.312ZM165.88 28.46c.744-.456 1.512-.936 2.304-1.44a27.113 27.113 0 0 0 2.196-1.548c.672-.528 1.212-1.08 1.62-1.656.432-.6.648-1.212.648-1.836 0-.888-.48-1.332-1.44-1.332-.6 0-1.236.384-1.908 1.152-.648.744-1.272 1.716-1.872 2.916-.6 1.2-1.116 2.448-1.548 3.744Z"
      />
    </svg>
  )
}

Installation

npx shadcn@latest add @alpine/logo

Usage

import { Logo } from "@/components/logo"
<Logo />