Managing icons with Laravel and BladeUI

Hey there!

How do you guys go about managing "custom" icons in a laravel/blade project? I've been using this package https://blade-ui-kit.com/ which makes me think if I even need it, or I should rather create a component myself and get rid of that.

How do you guys normally structure your SVG icons? I'm re-factoring this part as it was getting messy.

However, makes me also think, if I was to use that, all custom icons, how would you go about structuring icons that have a variation of "solid/outline"?

Would you have an SVG folder and inside have e.g. a folder of an SVG name say 'Book' and inside book have 'solid', 'outline'? Or maybe have two folders inside svg 'solid/outline' and then in solid have book and outline have book?

How would you make subdirectories of SVG work with BladeUI as well?

I've tried to access svg/solid/woo.svg like so: <x-icon-solid.woo /> but that didn't work, I feel like that's what the docs said. I tried to access it in different ways too, but that didn't seem to work.

esorone

4 years ago

Level 4

Hey,

First of all, I create a sprite image of the icons and store this in a folder.. One folder per Icons package. And after this i create a component. On this way Im able to select multiple icon packages.

View/Components/Icons.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Icons extends Component
{
    public $package;
    public $icon;

//    public $folders;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($icon, $package)
    {
        $this->package = '/icons/'.$package.'/';
        $this->icon = $icon;

    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.icons');
    }
}

Blade-Component "icons"

<span {{ $attributes->merge(['class' => 'fill-none mr-4 h-6 w-6']) }} >
    <svg viewBox="0 0 24 24" stroke=""
        stroke-width="{{ $strokeWidth ?? 1 }}"
         {{ $attributes->merge(['class' => 'inline-block relative']) }}>
{{--        class="inline-block relative {{ $class ?? '' }}">--}}
        <use xlink:href="{{$package}}sprite.svg#{{$icon}}"  />
    </svg>
</span>

Blade:

     <x-icons package="{{$search->package}}" icon="{{$search->icon_name}}"
      class="stroke-rose-600 w-10 h-10 ml-3 mr-3 "></x-icons>

1 like

aurelianspodarec

4 years ago

Level 7

@esorone How would you create a variation of the same icon, but different type e.g. solid, outline or such? How do you structure that part?

esorone

4 years ago

Level 4

@aurelianspodarec I use a backend to create e.g. a submenu and during the creation if have a form were I select all the necessary fields. One of these fields is called package.

So I have a dropdown.. $package.. And this one is populated in the controller.

If I want to have new type of icons or icon package, I just store them in the /public/icons/NewIconsVariation and these are automatically picked up via the scandir()

So I have in the controller

        $dirs = scandir('../public/icons/');

        return view('layouts.v_template', compact('dirs') );

And in the view


                        <select name="package" class="form-control" id="package" placeholder="IconPackage">
                            <option value="-">Select Package</option>
                            @foreach($dirs as $dir)
                            <option value="{{$dir}}">{{$dir}}</option>
                            @endforeach
                             </select><br>
                        <input type="text" name="icon_name" class="form-control" id="icon_name" placeholder="Icon Name"><br>

This way it gave me much flexibility without changing any logic, but just store new icons in a folder

1 like

Please or to participate in this conversation.