Best Practice For Blade UI Kit Blade Icons

Best Answer

Level 58

To address your questions about best practices for using Blade UI Kit with Blade Icons, let's break down each part of your query and provide a solution.

1. Directory Structure for SVG Icons

When dealing with multiple icon sets, it's a good idea to keep your directory structure organized. You can either:

Option A: Place all SVG files in a single directory (e.g., resources/svg).
Option B: Create separate directories for each icon set (e.g., resources/svg/heroicons, resources/svg/bootstrap-icons).

Recommendation: Use separate directories for each icon set. This keeps your SVG files organized and makes it easier to manage and update them.

2. Installing Missing Icons

If some icon packages are lacking icons you need, you have two options:

Option A: Install the entire icon package and add missing icons manually.
Option B: Only download and place the specific icons you need in a directory you specify in the blade-icons.php config file.

Recommendation: If you only need a few icons from a package, it's more efficient to download just those icons and place them in a directory you specify. This keeps your project lightweight and avoids unnecessary files.

3. Directory for Bootstrap Icons

When you installed the Bootstrap package and it created a /public/vendor/blade-bootstrap-icons/ directory, this is not typical for Blade Icons, which usually places SVG files in the resources directory. This might be due to the specific package's configuration.

Recommendation: You can move the SVG files to a directory within resources and update the blade-icons.php config file to point to the new location. This keeps all your SVG files in a consistent place.

Example Configuration

Here's an example of how you can configure your blade-icons.php to handle multiple directories:

return [

    'paths' => [
        resource_path('svg'),
        resource_path('svg/heroicons'),
        resource_path('svg/bootstrap-icons'),
        // Add more paths as needed
    ],

    'components' => [
        'icon' => 'blade-ui-kit/blade-icons::components.icon',
    ],

];

Example Usage in Blade Templates

Once you have your directories set up and configured, you can use the icons in your Blade templates like this:

<x-icon name="heroicons.outline.user" class="w-6 h-6 text-gray-500"/>
<x-icon name="bootstrap-icons.alarm" class="w-6 h-6 text-gray-500"/>

Summary

Organize SVG files in separate directories for each icon set.
Download only the icons you need if the package is too large or missing specific icons.
Update the blade-icons.php config file to include paths to your SVG directories.
Use the icons in your Blade templates with the appropriate path.

By following these best practices, you can keep your Blade Icons organized and easy to manage.