SVG Icons

Alexandr Chernyaev • September 19, 2020

In the latest release of the package, I replaced 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, you could 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

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')
],

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(#);

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.