Logo

Brand logo link that shows light/dark variants. Built with NuxtLink and img elements.

<script setup lang="ts">
import RyderLogo from "@opeolluwa/ryder/components/primitives/Logo.vue"
</script>

<template>
  <RyderLogo to="/" />
</template>

Examples

<script setup lang="ts">
import Logo from "../../../src/components/primitives/Logo.vue";
</script>

<template>
  <div class="flex flex-col gap-4">
    <Logo to="/" />
    <Logo
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Crect width='120' height='40' rx='8' fill='%231a1a1a'/%3E%3Ctext x='60' y='25' font-size='14' fill='%23fff' text-anchor='middle'%3ERyder%3C/text%3E%3C/svg%3E"
      src-dark="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Crect width='120' height='40' rx='8' fill='%23fff'/%3E%3Ctext x='60' y='25' font-size='14' fill='%231a1a1a' text-anchor='middle'%3ERyder%3C/text%3E%3C/svg%3E"
      alt="Ryder"
      to="/"
    />
  </div>
</template>

Props

Prop	Type	Default	Description
src	string	"/extended-logo-white.png"	Light-mode logo image.
srcDark	string	"/extended-logo-green.png"	Dark-mode logo image.
alt	string	"logo"	Image alt text.
to	string	"/"	Destination URL for NuxtLink.

Emits

None.

Slots

None.

Notes

• Hidden in dark mode via dark:hidden on light image; shown in dark via dark:block.
• Defaults point to images that may not exist in docs; demo uses inline SVG data URIs as fallback.