How to Customise the Logo in Your Laravel Jetstream Application

tips-tricks
Table of Contents

This article assumes you've already got a Laravel Jetstream application setup. If you haven't, read the official documentation on how to get started.

Although Jetstream publishes quite a few things into your application, it doesn't publish views by default. The main reason for this is it's much easier to rollout bug fixes or new features if the views are registered inside of the package.

You can publish them yourself however by running the following command:

php artisan vendor:publish --tag=jetstream-views

This will publish all of Jetstream's views into resources/views/vendor/jetstream.

The steps needed here depend on which stack you have chosen.

To use a custom logo, you'll need to customise three files:

  1. resources/views/vendor/jetstream/components/application-logo.blade.php
  2. resources/views/vendor/jetstream/components/application-mark.blade.php
  3. resources/views/vendor/jetstream/components/authentication-card-logo.blade.php

Each of these files will contain an SVG. Replace this markup with your own logo (another SVG or even an <img> tag).

If you use an SVG, be sure to add the {{ $attributes }} on to the <svg> tag so that any attributes passed through to the component are still rendered.

You'll need to customise three files for Inertia too:

  1. resources/js/Jetstream/ApplicationLogo.vue
  2. resources/js/Jetstream/ApplicationMark.vue
  3. resources/js/Jetstream/AuthenticationCardLogo.vue

Much like the Livewire stack, just replace the SVG markup with your own SVG or an <img> tag.

Enjoyed this post or found it useful? Please consider sharing it on Twitter.