Using Voyager admin icons on the front end

Using Voyager admin icons on the front end

Written by Keith Prinkey on May 29th, 2023 ・ Views ・ Report Post

Keith Prinkey Visit User Profile

Introduction

In this article we will be converting Voyager backend icons to SVG and rendering them in our menus.

“This post assumes you already have Voyager installed on a working application/platform.”

Finding an icon

  1. The icon I am working with today is below you can find it in your Laravel application here {/admin/compass/} and searching 'voyager-markdown'. Technically Voyager uses Font Awesome icons so you could get it from FA as well.
{voyager-markdown}

Using ChatGPT to convert icon into SVG code

  1. For the next part you need either a free or paid ChatGPT account. If you already have an account open ChatGPT once it has loaded. Start a new chat. Model Version 4 is recommended for best results since it uses a larger language model and has better logic processing and in my experience gives much better results.

Either way it will work. Take the Voyager icon name you want to use, in my case it is {voyager-markdown}, and ask ChatGPT to give you SVG code for the icon. You should get a response similar to the one below:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
  <path fill="currentColor" d="M320.2 355.4L480 247.9V440h59.3V256c0-28.4-34.5-42.8-54.6-22.6l-80.7 88.2V64h-59.3v309.6l-80.7-88.2c-20.1-20.3-54.6-5.8-54.6 22.6v184H480V247.9l-159.8 107.5zm309.8-202.6V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v104.8c0 42 32 80.6 74.1 84.3 43.2 3.8 77.9-32 77.9-74.1V48h368.1v104.8c0 42 34.7 77.8 77.9 74.1 42-.6 74.1-39.3 74.1-84.3z"/>
</svg>

Reviewing your menu code

  1. Now that we have our SVG code, and depending on your menu structure (I stayed with the structure given in Laravel Wave) you should have code similar to below for your menu item and icon via SVG.
<a href="/categories/domains" class="flex items-start p-10 -m-3 space-x-3 transition duration-150 ease-in-out rounded-lg pb-7 group">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="flex-shrink-0 w-4 h-4 mt-1 text-gray-500 duration-200 group-hover:text-gray-800 transition-color ease">
        <path fill="currentColor" d="M320.2 355.4L480 247.9V440h59.3V256c0-28.4-34.5-42.8-54.6-22.6l-80.7 88.2V64h-59.3v309.6l-80.7-88.2c-20.1-20.3-54.6-5.8-54.6 22.6v184H480V247.9l-159.8 107.5zm309.8-202.6V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v104.8c0 42 32 80.6 74.1 84.3 43.2 3.8 77.9-32 77.9-74.1V48h368.1v104.8c0 42 34.7 77.8 77.9 74.1 42-.6 74.1-39.3 74.1-84.3z"/>
    </svg>
    <div class="space-y-1">
        <p class="text-base font-medium leading-6 text-gray-700 duration-200 group-hover:text-gray-900 transition-color ease">
            Online Services
        </p>
        <p class="text-xs font-normal leading-5 text-gray-500 duration-200 group-hover:text-gray-700 transition-color ease">
            This category contains Domain registration, Blogs, Broadband, Domain Registrations, Email Marketing, Internet Service Providers, Search Engine, Web Design, Web Hosting/Servers, Web Tools
        </p>
    </div>
</a>

Inserting the code into your menu

  1. Now you need to put the code either in your menu.blade.php or whatever file you are using to display your menu.

It is that simple. Sometimes ChatGPT does not get it right but if you prompt it again or point out the mistake, 9 out of 10 times it has fixed its mistake in seconds. I think this is a much better alternative to searching for a site that will provide svg code for icons, images and other graphics.

If you feel differently or have a different way of doing it, please by all means leave a comment

Comments (0)