Laravel 12 - How to Integrate Blade Heroicons
Laravel 12 - How to Integrate Blade Heroicons
In this tutorial, learn how to integrate Blade Heroicons in Laravel 12 to display modern, responsive icons in Blade views and enhance your app's UI with clean, lightweight SVGs.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through integrating Blade Heroicons into a Laravel 12 application to enhance the user interface with scalable and customizable icons. We begin by setting up a fresh Laravel 12 project and configuring MySQL for database management. After installing the Blade Heroicons package via Composer, we confirm its successful installation by displaying an icon on the homepage. Then, we dive into customizing the icons using Tailwind CSS classes or inline styles to adjust their appearance. By the end of this tutorial, you’ll be able to easily integrate Heroicons into your Laravel 12 views and use them to enhance your UI design without the need for additional setup.
Step # 1 : Set Up Your Laravel 12 Project.
Let’s kick things off by setting up a Laravel 12 project. You can either start from scratch or use an existing one totally up to you. To create a new project using the Laravel installer, run.
laravel new heroicons
Prefer Composer? No problem use this instead.
composer create-project laravel/laravel --prefer-dist heroicons
Once the project is spinning up, follow the prompts.
- Skip the Starter Kit by selecting None.
- Choose MySQL as your database.
- Type yes when it asks to run the default migrations.
- When prompted, allow it to run npm install and npm run build to get your frontend dependencies ready.
Once the setup is complete, your Laravel 12 project will be ready to go with MySQL configured as the database. With the essentials in place, you can jump straight into building features without dealing with extra setup or boilerplate.
Step # 2 : Navigate to Your Project Folder.
Open your terminal of choice, whether that's Git Bash, Command Prompt, or something else, and move into your Laravel project directory. This is the base folder where you’ll be running all Artisan commands and managing your app. For example, if you're using Git Bash and your project is in htdocs, you can use.
cd c:xampp/htdocs/heroicons
Be sure to update the path based on where your project actually lives. It’s important to be inside the project’s root so Laravel knows where to execute commands and apply changes properly.
Step # 3 : Install Blade Heroicons.
To bring Heroicons into your Laravel project, use the following command in your terminal.
composer require blade-ui-kit/blade-heroicons
Composer will take care of fetching the package and installing everything it needs behind the scenes. Once the process is done, the Heroicons component will be ready to use in your Blade views, no extra setup needed. You can start adding beautiful, scalable icons to your UI right away, giving your app a cleaner and more modern look.
Step # 4 : Publish Blade Heroicons configuration.
Blade Heroicons offers a range of customizable features, such as default classes, attributes, and other settings, allowing you to tailor the icons to your project’s specific requirements. To access and modify these settings, you’ll need to publish the configuration file for Blade Heroicons. Run the following command in your terminal.
php artisan vendor:publish --tag=blade-heroicons-config
Executing this command will create the blade-heroicons.php configuration file in your project’s config directory. Once the file is published, you can open it and adjust settings like default classes and attributes, allowing you to control how the icons are rendered across your app. This gives you full flexibility to modify the icon appearance and behavior to match your design preferences and project needs.
Step # 5 : Update welcome.blade.php to Display Heroicons.
Now that everything is set up, it's time to update the welcome.blade.php file and display a Blade Heroicon for testing. This will let you confirm that the icons are integrated and functioning correctly in your Laravel project. We'll edit the welcome.blade.php file located in the resources/views directory, and here's an updated version with Tailwind CSS for styling and Blade Heroicons for the icon display.
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blade Heroicons - Code Shortcut</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans antialiased">
<div class="max-w-4xl mx-auto mt-10 p-5 bg-white rounded-lg shadow-lg">
<h1 class="text-4xl font-semibold text-center text-gray-900 mb-4">Welcome to Blade Heroicons!</h1>
<p class="text-lg text-center text-gray-700 mb-6">You are now ready to use scalable, customizable icons in your Laravel application.</p>
<!-- Heroicon example: Home Icon -->
<div class="flex justify-center">
<x-heroicon-o-home />
</div>
<p class="text-center text-gray-600 mt-6">This is a simple test to display the home icon from Blade Heroicons. You can now start integrating other icons as needed throughout your app!</p>
</div>
</body>
</html>
This setup uses Tailwind CSS for a clean, responsive layout, with the Blade Heroicon <x-heroicon-o-home /> displaying a home icon. The layout is simple and centered, featuring a heading, description, and the icon. After saving the changes to welcome.blade.php, the homepage of your Laravel app will display the icon, ready for testing in the browser.
Step # 6 : Test the Setup and Style the Icon.
Let’s bring it all together by testing your Blade Heroicon on the browser. First, start the Laravel development server.
php artisan serve
Then visit http://127.0.0.1:8000 in your browser. You should see the home icon rendered on the page, confirming the integration is successful.
Icons can also be customized by applying Tailwind CSS classes to the components. Below is an example of how to style the icon.
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blade Heroicons - Code Shortcut</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans antialiased">
<div class="max-w-4xl mx-auto mt-10 p-5 bg-white rounded-lg shadow-lg">
<h1 class="text-4xl font-semibold text-center text-gray-900 mb-4">Welcome to Blade Heroicons!</h1>
<p class="text-lg text-center text-gray-700 mb-6">You are now ready to use scalable, customizable icons in your Laravel application.</p>
<!-- Heroicon example with Tailwind classes -->
<div class="flex justify-center">
<x-heroicon-o-home class="w-16 h-16 text-blue-500" />
</div>
<p class="text-center text-gray-600 mt-6">This icon uses Tailwind utility classes to adjust size and color.</p>
</div>
</body>
</html>
In this example, Tailwind utility classes (w-16 h-16 text-blue-500) are used to modify the icon's size and color.
Alternatively, you can style the icon directly using inline CSS, like this.
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blade Heroicons - Code Shortcut</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans antialiased">
<div class="max-w-4xl mx-auto mt-10 p-5 bg-white rounded-lg shadow-lg">
<h1 class="text-4xl font-semibold text-center text-gray-900 mb-4">Welcome to Blade Heroicons!</h1>
<p class="text-lg text-center text-gray-700 mb-6">You are now ready to use scalable, customizable icons in your Laravel application.</p>
<!-- Heroicon example with inline CSS -->
<div class="flex justify-center">
<x-heroicon-o-home style="color: gray; width: 200px; height: 200px;" />
</div>
<p class="text-center text-gray-600 mt-6">This icon uses inline CSS for size and color customization.</p>
</div>
</body>
</html>
This example shows how to style the icon using inline CSS to adjust its color and size. Refresh your browser to see the changes.
Conclusion
By following this guide, you've successfully integrated Blade Heroicons into your Laravel 12 application, enhancing your project with scalable and customizable icons. You began by setting up a fresh Laravel project, installing the Blade Heroicons package, and confirming its functionality by displaying an icon on your homepage. You also explored how to customize icons using Tailwind CSS classes and inline styles to suit your design preferences. This integration simplifies enhancing your Laravel app's user interface, making it more visually appealing with minimal effort. As you continue building your application, you can explore additional customization options and incorporate these icons throughout your project to elevate the user experience.
For more information, check out the official 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