Laravel 11 - Blade-Heroicons
Laravel 11 - Blade-Heroicons
In this tutorial, we'll cover how to integrate and use the Blade Heroicons package in Laravel 11, offering scalable, customizable icons to enhance your application's UI.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this tutorial, we walk through integrating Blade Heroicons into a Laravel application to enhance the user interface with scalable, customizable icons. We begin by setting up a fresh Laravel project, where we configure the environment with Pest for testing and MySQL for database management. After installing the Blade Heroicons package using Composer, we verify its successful installation by displaying an icon on the homepage. We then dive into customizing the icons with Tailwind CSS classes or inline styles to adjust their appearance. By the end of the guide, you’ll be equipped to easily integrate Heroicons into your Laravel views and begin using them in your projects to improve UI design without additional setup.
Step # 1 : Create a Fresh Laravel Project or Use an Existing One.
Begin by creating a fresh Laravel project, or use an existing one if you prefer. To start from scratch, run.
laravel new heroicons
Alternatively, if you prefer Composer, use this command.
composer create-project laravel/laravel --prefer-dist heroicons
During the setup process, follow these options.
- Select None when prompted for a Starter Kit.
- Choose Pest as the testing framework.
- Use MySQL as the database.
- When asked about running the default migrations, type yes.
This process will set up a new Laravel project named heroicons, pre-configured with Pest for testing and MySQL for database management. With Pest in place, you’ll have an efficient, expressive framework for writing tests that scale smoothly as your project grows. The choice of MySQL ensures compatibility with most production environments, giving you a reliable foundation for handling data. Once everything is set up, you’ll be ready to dive into building features without needing to worry about your project's core setup.
Step # 2 : Access Your Project Directory.
Open a terminal (e.g., Git Bash or Command Prompt) and navigate to your Laravel project’s root directory. This is where you’ll run Artisan commands and manage your app. For Git Bash, use the command.
cd c:xampp/htdocs/heroicons
Make sure to adjust the path according to where your Laravel project is located on your system. This step is essential for working with your Laravel app and executing commands from the project’s root folder.
Step # 3 : Install the Blade Heroicons Package.
To install the Blade Heroicons package, run the following command in your terminal.
composer require blade-ui-kit/blade-heroicons
Once you run the command, Composer will handle the installation process by downloading the necessary package files and dependencies. After the installation completes, Blade Heroicons will be automatically available in your Laravel project. You can then start using Heroicons directly within your Blade templates to enhance your application’s UI with scalable, customizable icons. No additional setup is required, and you can immediately begin implementing the icons in your views.
Step # 4 : Publish the configuration.
Blade Heroicons comes with customizable features such as default classes and attributes that can be configured to suit your project’s needs. To access and modify these settings, you'll need to publish the blade-heroicons.php configuration file. To do this, run the following command.
php artisan vendor:publish --tag=blade-heroicons-config
This command will generate the blade-heroicons.php config file in your config folder. Once published, you can modify this file to set default classes, attributes, and other settings for how the icons should be rendered in your application. It gives you more control over the appearance and behavior of the icons throughout your app.
Step # 5 : Update welcome.blade.php.
Next, let’s update the welcome.blade.php file to display a Blade Heroicon for testing. This will allow you to see the icons in action on the homepage of your Laravel app. Replace the contents of welcome.blade.php with the following code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Blade Heroicons - Code Shotcut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="ml-5">
<h1 class="text-3xl font-bold">Welcome Blade</h1>
<p>Blade - Heroicons</p>
<x-heroicon-o-arrow-left/>
</div>
</body>
</html>
This code adds a simple heading and a left arrow icon (provided by Blade Heroicons) inside a styled <div>. We’ve also included Tailwind CSS via CDN to handle the styling. With these changes saved in your welcome.blade.php file, your view is now set up and ready for testing. In the next step, we'll start the development server and preview the icon in the browser.
Step # 6 : It's time to test.
Now it’s time to test and see your Blade Heroicons in action! First, start the Laravel development server by running the following command in your terminal.
php artisan serve
Once the server is up and running, open your browser and navigate to http://127.0.0.1:8000. You should be able to see your Blade Heroicon displayed on the page.
You can also customize the icons further by passing CSS classes to the icon components. Here’s an example of how you can style the icon.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Blade Heroicons - Code Shotcut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="ml-5">
<h1 class="text-3xl font-bold">Welcome Blade</h1>
<p>Blade - Heroicons</p>
<x-heroicon-o-arrow-left class="w-6 h-6 text-gray-500"/>
</div>
</body>
</html>
In this example, we’ve added Tailwind utility classes (w-6 h-6 text-gray-500) to adjust the icon's size and color.
Alternatively, you can apply inline styles directly to the icon, like this.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Blade Heroicons - Code Shotcut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="ml-5">
<h1 class="text-3xl font-bold">Welcome Blade</h1>
<p>Blade - Heroicons</p>
<x-heroicon-o-arrow-left style="color: #555; width: 100px; height: 100px;"/>
</div>
</body>
</html>
This example demonstrates how you can style the icon with inline CSS, adjusting the color and size directly. Now, check your browser and confirm the changes.
Conclusion
By following this guide, you’ve successfully integrated Blade Heroicons into your Laravel application, bringing scalable and customizable icons to your project. You started by setting up a fresh Laravel project, installed the Blade Heroicons package, and verified its functionality by adding an icon to your homepage. You also learned how to customize icons with Tailwind CSS classes and inline styles to match your design needs. This integration allows you to easily enhance the user interface of your Laravel application with minimal effort. As you continue developing your app, you can explore further customization options and use these icons throughout your project to improve the overall user experience.
For more details, please refer to the Blade Heroicons documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments