DEV Community

Cover image for Laravel Orchid - SVG Icons
Alexandr
Alexandr

Posted on

Laravel Orchid - SVG Icons

In the latest release of the package, I worked on replacing Icon Fonts in favor of the SVG format, which means that now icons are available in a vector.

Previously, if you needed to display your own (or from the Internet) icon, then you had to translate it into a font and include a CSS file with a description, now this is not needed. It is enough to copy the desired icon to the project.

Let's do it together. Let's say we want to include an icon from the popular Font Awesome. To do this, select a suitable storage directory, for example, create a new icons directory and a fontawesome subdirectory:

resources
  - css 
  - icons
      -- fontawesome 
  - js
  - lang
  - views
Enter fullscreen mode Exit fullscreen mode

Load the appropriate icons into the new directory, for example, this notebook icon. Then we will indicate to the package the directory in which we need to search for our images, for this we will edit the configuration file config/platform.php:

'icons' => [
    'fa' => resource_path('icons/fontawesome')
],
Enter fullscreen mode Exit fullscreen mode

All we have done here is declare the prefix by which we will refer to fa and the directory where the files are located.
To display in the components of the package, you only need to pass the prefix + name, for example, the definition of the icon in the menu will look like this:

ItemMenu::label('Example of custom icons')
    ->icon('fa.address-book')
    ->url(#);
Enter fullscreen mode Exit fullscreen mode

Moreover, if for some reason your project does not have Laravel Orchid, then a separate package has been prepared for the Blade and SVG template engine.

Top comments (1)

Collapse
 
tanxeel profile image
Tanzeel Ur Rehman

I want to list all icons in dropdown so user can select it. Is there any way in orchid? Thanks