sexy/packages/frontend/src/lib/components/logo/logo.svelte

<script lang="ts">
  import { _ } from "svelte-i18n";
  import SexyIcon from "../icon/icon.svelte";

  const { hideName = false } = $props();
</script>

<div class="relative">
  <SexyIcon class="w-8 h-8 text-primary" />
</div>
<span
  class={`logo text-3xl text-foreground opacity-90 tracking-wide font-extrabold drop-shadow-x ${hideName ? "hidden sm:inline-block" : ""}`}
>
  {$_("brand.name")}
</span>

<style>
  .logo {
    font-family: "Dancing Script", cursive;
  }
</style>