How to add/modify SVG icons (Heroicons) in Hyva Theme?

General

Hyva Tutorials
-
General
-
How to add/modify SVG icons (Heroicons) in Hyva Theme?

The Hyva theme for Magento 2 is a popular choice for creating visually appealing and user-friendly online stores. One of the key features of the Hyva theme is its flexibility and customization options, including the ability to add and modify SVG icons.

In this blog post, we will provide a comprehensive guide on how to add and modify SVG icons in the Hyva theme.

The icon set can be configured with di.xml or by extending the class. The module ships with Heroicons and two matching view models:

HeroiconsSolid
HeroiconsOutline

You can find and preview these icons by visiting the website: https://v1.heroicons.com/

Here’s how to locate the icons from Heroicons. 👇

Check the SVG file name and open vendor/hyva-themes/magento2-theme-module/src/ViewModel/Heroicons.php file. Then, match the file name with the corresponding function and utilize the function as needed.

How to use SVG Icons in the template using View Models in Hyvä

To add SVG icons to the Hyva theme, you need to follow a few simple steps. Let’s walk through the process:

Require one of the Heroicons view models in your template:

Copy Code

// For Heroicons Outline 
/** @var Hyva\Theme\ViewModel\HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(\Hyva\Theme\ViewModel\HeroiconsOutline::class);


//For Heroicons Solid
/** @var Hyva\Theme\ViewModel\HeroiconsSolid $HeroiconsSolid */
$heroiconsSolid = $viewModels->require(\Hyva\Theme\ViewModel\HeroiconsSolid::class);

Then render the icons like this:

Copy Code

<?= $heroicons->arrowLeftHtml('w-8 h-8') ?>

All parameters are optional, and change the class , width and height attributes of the SVG element, or add additional HTML attributes. To render an SVG without a width and a height attribute, pass null as the second and third arguments.

Copy Code

<?= $heroicons->arrowLeftHtml('w-8 h-8', null, null) ?>

New to Hyvä?? Learn about the Hyvä Theme from scratch!

How to use SVG icons in Magento admin CMS content in Hyvä

The Hyvä theme module introduces an icon directive, enabling the rendering of any SVG icon in filtered content, such as CMS blocks or pages.

To add SVG icons in Magento CMS content, follow these few simple steps below.

Copy Code

{{icon "heroicons/solid/shopping-cart" classes="w-6 h-6" wid	th=12 height=12}}

Custom icons stored in web/svg/ such as app/design/frontend/[Vendor]/[Theme]/web/svg/cart.svg can be referenced as

Copy Code

{{icon "cart" classes="w-6 h-6" width=12 height=12}}

How to use Overriding heroicons in your theme

The SVGs are stored in web/svg/heroicons/outline and web/svg/heroicons/solid. Magento’s theme fallback mechanism applies, allowing you to override these files in your theme.

To use the custom icons you will need to create a subdirectory in the theme like “Hyva_Theme/web/svg/heroicons/outline” and “Hyva_Theme/web/svg/heroicons/solid” and place your SVG icons there.

Note: Ensure that the SVG file name matches the Hyva vendor icon file name.

To find the SVG icon name, go to the icon function and follow the pattern as shown in the example: userCircleHtml() corresponds to user-circle.svg. You can find this icon from vendor/hyva-themes/magento2-theme-module/src/view/frontend/web/svg/heroicons/outline/user-circle.svg path.

Copy Code

<?= $heroicons->userCircleHtml(
    'h-6 w-6 text-slate-800 hover:text-black',
    32,
    32,
    ['aria-hidden' => 'true']
); ?>

Old Icon

Updated Icon

How to add new heroicons in your theme

To use the icons, you can instantiate the view model, and to render the icon, utilize the renderHtml function with the icon name as one of the parameters or use the magic method matching the desired icon name.

To add a new SVG: Go to Hyva_Theme/web/svg/heroicons/solid OR Hyva_Theme/web/svg/heroicons/outline path and add the SVG file here.

Note: When using the same SVG in multiple places with different colors, please ensure to include fill=”none” and stroke=”currentColor” attributes in the <svg> tag.

Copy Code

$heroicons->renderHtml('magic-wand', $class, $width, $height) // either
<?= $heroicons->renderHtml('search', 'text-black', 24, 24) ?>
$heroicons->magicWandHtml($class, $width, $height) // or

Accessibility

If you use an icon for decorative purposes, hide it from assistive technologies (ATs), using aria-hidden=”true”.

Alternatively, if both of the following conditions are met:

No role=”img” attribute is present.
No aria-hidden=”true” attribute is present.

The \Hyva\Theme\ViewModel\SvgIcons will add an <title>Icon Name</title> node within the <svg> tag, positioned before the <path>. This ensures that assistive technologies can deliver relevant information about the icon to the visitor.

Read more resources on Hyva themes: