I am new to Laravel and am trying to change the logo in a Laravel application with Jetstream and Inertia.
I have gone over the documentation as well as resources on Laracasts and understand that I need to update the svg (or can use a png/jpg etc by using the html img tag) in the following files:
The Logo is referenced in AppLayout.vue via a jet-application-mark element:
<div class="flex-shrink-0 flex items-center">
<inertia-link :href="route('dashboard')">
<jet-application-mark class="block h-9 w-auto" />
</inertia-link>
</div>
As well as a jet-application-logo element in the Welcome.vue:
<div>
<jet-application-logo class="block h-12 w-auto" />
</div>
In each of the files listed above I replaced the svg with an html img to a resource:
<img src="{{ asset('images/enhanced-logo.png') }}" />
After changing the files above and rebuilding, the original Jetstream logo remains - the only place that it is working is in login.blade.php, the following code does pull in the image that I want:
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
Any direction as to what I am doing wrong would be appreciated.
To change logo in a Laravel Jetstream application:
The authentication views in a Jetstream application, regardless of the stack are simple blade views common for both stacks. To change the logo for authentication views edit resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
<a href="/">
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</a>
Then depending upon the stack
Inertia stack
Replace the default logo with your own custom logo in
with
<template>
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</template>
Livewire stack
Replace the default logo with your own custom logo in
with
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />