Icon Font

In order to use icon fonts in the project, icon files in SVG format must be copied to the assets/svg-icons directory. After this process, the pz-icon-font script in the project automatically edits the file names and creates an icon font named pz-icon.

Creating the Icon Font

SVG files copied to the assets/svg-icons directory are automatically converted to icon fonts with the dev, dev:pure or build command with yarn or npm. The names of SVG files are automatically converted to slugs before icon font conversion. For example, after the Add To Cart.svg file is copied to the directory and npm/yarn commands are executed, it turns into add-to-cart.svg. There are now slug names of icons in the created icon font.

Using the Icons

Icons with the names of SVG files that are converted to automatically created icon font and slug names become ready for use. Icon can be used for Add To Cart.svg example as follows.

<i class="pz-icon-add-to-cart">

We use pz-icon mixin as @include pz-icon ("icon-name") to include an icon in any selector in CSS. Example usage is as follows:

.add-to-cart {
 @include pz-icon('add-to-cart');
}

The icon used as pz-icon-add-to-cart class in the example above can now be used as add-to-cart class.

Using the Multicolor Icons

Technically, icon fonts do not support multicolor features. For this reason, multicolored icons should be used as images. By adding mc-prefix in front of SVG file names, it is ensured that these files are multicolored and automatically copied to the static folder. For example, for Google Logo.svg example, the filename should be mc-google-logo.svg. The use of icon for this example is as follows:

<img src="{{ static('img/mc-google-logo.svg') }}">