I installed Laravel 8 with Jetstream authentication. Now I want to change the login components, specifically the logo. Where are these components placed?
I found this, follow below step.
You can run below commands to publish the assets.
php artisan vendor:publish --tag=jetstream-views
After that files will be available under the folder resources/views/vendor/jetstream/components
There is an answer in the installation tutorial.
https://jetstream.laravel.com/1.x/installation.html#application-logo
php artisan vendor:publish --tag=jetstream-views
Livewire
Next, you should customize the SVGs located in the resources/views/vendor/jetstream/components/application-logo.blade.php, resources/views/vendor/jetstream/components/authentication-card-logo.blade.php, and resources/views/vendor/jetstream/components/application-mark.blade.php components.
Inertia
Next, you should customize the SVGs located in resources/views/vendor/jetstream/components/authentication-card-logo.blade.php, resources/js/Jetstream/ApplicationLogo.vue, and resources/js/Jetstream/ApplicationMark.vue. After customizing these components, you should rebuild your assets:
I found this, follow below step.
You can run below commands to publish the assets.
php artisan vendor:publish --tag=jetstream-views
After that files will be available under the folder resources/views/vendor/jetstream/components
Just add your own html.
Do like this,
<x-slot name="logo">
<img src="{{ url('logo.png') }}" />
</x-slot>
If you want to get your logo on your database.
You need to run first php artisan vendor:publish --tag=jetstream-views
this command. After that, you need to get resources\views\auth\login.blade.php
and replace this <x-jet-authentication-card-logo />
with you own component!
You can do this like that run this command php artisan make:component AppLogo
And create a your own component.
<?php
namespace App\View\Components;
use App\Models\GeneralSettings;
use Illuminate\View\Component;
class AppLogo extends Component
{
public $logo;
public function __construct()
{
$this->logo = GeneralSettings::first()->favicon;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|string
*/
public function render()
{
return view('components.home.app-logo');
}
}
After that you need to edit your resources\views\components\home\app-logo.blade.php
file like that;
<div>
<img src="{{$logo}}">
</div>
After that, you need to get resources\views\auth\login.blade.php
and replace this <x-jet-authentication-card-logo />
with you own component! Like that <x-applogo />
Result to be like that;
<x-guest-layout>
<x-jet-authentication-card>
<x-slot name="logo">
{{-- <x-jet-authentication-card-logo />--}}
<x-applogo />
</x-slot>
<x-jet-validation-errors class="mb-4" />
....
To change Jetstream logo in Laravel 8. You must do 3 steps
- 1.first run This Command to generate components
php artisan vendor:publish --tag=jetstream-views this will generate view [\vendor\laravel\jetstream\resources\views] To
[\resources\views\vendor\jetstream] - 2.Open \resources\views\vendor\jetstream and move to authentication-card-logo.blade
- 3.Crate your Svg image from https://www.w3schools.com/graphics/svg_intro.asp or download free from 1: https://freesvg.org I also change my logo by doing this
On Laravel 10, to change Jetstream Logo on all pages:
- Replace content of /resources/views/components/application-logo.blade.php by:
<img src="{{ asset('images/logo.png') }}" alt=""/>
- Replace content of /resources/views/components/authentication-card-logo.blade.php by:
<a href="/">
<img src="{{ asset('images/logo.png') }}" alt=""/>
</a>
© 2022 - 2024 — McMap. All rights reserved.