How to install and use Hyvä SVG Icon Extensions?

Icons play a crucial role in web design, providing visual cues and enhancing the user experience. In the case of Hyvä, a modern Magento 2 theme, the Hyvä SVG Icon Extensions offer a powerful and flexible way to incorporate scalable vector icons into your website. 

In this blog post, we will explore the steps involved in installing and using the Hyvä SVG Icon Extensions to enhance your Hyvä theme.

The Hyvä SVG Icon Extensions are a set of extensions specifically designed for the Hyvä theme. They allow you to easily add and manage scalable vector icons in your Hyvä-powered website. These extensions provide a wide range of icons that can be customized and styled to match your brand’s aesthetics.

Hyvä SVG Icon Extensions

Hyvä already includes both the Outline and Solid versions of the  Heroicons v1 SVG icon pack.

On this blog, we gather links to additional icon packs.

• Payment Icons by Hyvä Themes
• Heroicons v2 by Thijs de Witt from Trinos
• Awesome Hyvä by JaJuMa
• Hyvä Flags by JaJuMa
• FeatherIcons by Sean and Ruud van Zuidam from Siteation
• LucideIcons by Sean and Ruud van Zuidam from Siteation
• Bootstrap Icons by Sean and Ruud van Zuidam from Siteation
• Flags Icons by Sean and Ruud van Zuidam from Siteation

For Icons packs, visit: https://github.com/topics/hyva-icons.

How to install Payment Icons

This Magento 2 module adds the option to use Payment Icons in your Hyva frontend.

This requires that you have a working Hyva frontend, this icon pack was made specifically for Hyva Themes and will not work out of the box with any other frontend.

This feature has been supported since Hyva v1.1.12.

Install the theme package:

 composer require siteation/magento2-hyva-icons-payment

Next, run the Magento installer:

 php bin/magento setup:upgrade

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

How to use Payment Icons

Respectively the `PaymentIcons`, `PaymentIconsMono`, and `PaymentIconsFlat` ViewModels, are located in `Siteation\HyvaIconsPayment\ViewModel\`.

To use this icon pack instead of the default Hyva icons, add the following code to your phtml file:

<?php
use Hyva\Theme\Model\ViewModelRegistry;
/** @var ViewModelRegistry $viewModels */
/* Start For Payment Default icons*/
use Siteation\HyvaIconsPayment\ViewModel\PaymentIcons;
/** @var PaymentIcons $paymentIcons */
$paymentIcons = $viewModels->require(PaymentIcons::class);
/* End For Payment Default icons*/
/* Start For Payment Flat icons*/
use Siteation\HyvaIconsPayment\ViewModel\PaymentIconsFlat;
/** @var PaymentIconsFlat $paymentIconsFlat */
$paymentIconsFlat = $viewModels->require(PaymentIconsFlat::class);
/* End For Payment Flat icons*/
?>

And similarly, use the Payment Icons as the HeroIcons in Hyva.

<?= $paymentIcons->idealHtml('p-1', 64, 48, ["aria-label" => "Pay with iDeal"]) ?>
<?= $paymentIcons->maestroHtml('p-1', 64, 48, ["aria-label" => "Pay with maestro"]) ?>
<?= $paymentIconsFlat->klarnaHtml('p-1', 64, 48, ["aria-label" => "Pay with klarna"]) ?>
<?= $paymentIconsFlat->paypalHtml('p-1', 64, 48, ["aria-label" => "Pay with PayPal", "aria-hidden" => "true"]) ?>

Your preview looks like the screenshot below.

Note: Make sure, if you use the payment icon through CMS static block then there is no need to install any other icons module. Because payment icons will not work.

How to install and use heroicons2

Then, install the theme package:

composer require hyva-themes/magento2-heroicons2

Next, run the Magento installer:

bin/magento setup:upgrade

There are currently 3 implementations: solid, outline and mini.

Respectively the `Heroicons2Solid`, `Heroicons2Outline`, and `Heroicons2Mini` ViewModels, are located in `Hyva\Heroicons2\ViewModel`.

The available icon render methods can be found at `vendor/hyva-themes/magento2-heroicons2/src/ViewModel/Heroicons2Interface.php`

/* For Heroicons2 Outline */

$heroicons2 = $viewModels->require(\Hyva\Heroicons2\ViewModel\Heroicons2Outline::class);

/* For Heroicons2 Solid */

$heroicons2Solid = $viewModels->require(\Hyva\Heroicons2\ViewModel\Heroicons2Solid::class)

and use the HeroIcons2 in a similar manner as the HeroIcons in Hyva;

<?= $heroicons2->userCircleHtml('h-6 w-6 text-slate-800 hover:text-black', 32, 32); ?>

<?= $heroicons2Solid->shoppingCartHtml('h-6 w-6 text-slate-800 hover:text-black', 32, 32); ?>

Your preview looks like the screenshot below.

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

The icons can also be rendered in CMS content, using the `{{icon}}` directive. Find the path of the SVG inside `vendor/hyva-themes/magento2-heroicons2/src/view/frontend/web/svg/`, and remove the `.svg` at the end.

{{icon "heroicons2/24/solid/shopping-cart" classes="w-6 h-6" width=12 height=12}}

{{icon "heroicons2/24/outline/academic-cap" classes="w-6 h-6" width=12 height=12}}

Hyvä Themes – Heroicons 2 Gitlab.

How to install and use Awesome Hyvä

The awesome Hyvä extension by JaJuMa enables the use of Font Awesome 5 & Font Awesome 6 icons as SVGs on Magento 2 & Mage-OS sites with Hyvä Themes.

Then, install the theme package:

composer require jajuma/awesomehyva

Next, run the Magento installer:

bin/magento setup:upgrade

Require one of the view models in your template:

JaJuMa “Awesome Hyvä” module provides 3 view models for Font Awesome v5:

• For Font Awesome v5:

• AwesomeiconsSolid
• AwesomeiconsRegular
• AwesomeiconsBrands

For Font Awesome v5 Awesome icons Solid:

/** @var \Jajuma\AwesomeHyva\ViewModel\AwesomeiconsSolid $awesomeiconsSolid */

$awesomeiconsSolid = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\AwesomeiconsSolid::class);

For Font Awesome v5 Awesome icons Regular:

/** @var \Jajuma\AwesomeHyva\ViewModel\AwesomeiconsRegular $awesomeiconsRegular */

$awesomeiconsRegular = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\AwesomeiconsRegular::class); 

For Font Awesome v5 Awesome icons Brands:

/** @var \Jajuma\AwesomeHyva\ViewModel\AwesomeiconsBrands $awesomeiconsBrands */

$awesomeiconsBrands = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\AwesomeiconsBrands::class);

JaJuMa “Awesome Hyvä” module provides 3 view models for Font Awesome v6:

• For Font Awesome v6:

• AwesomeiconsSolid
• AwesomeiconsRegular
• AwesomeiconsBrands

For Font Awesome v6 Awesome icons Solid:

/** @var \Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Solid $awesomeicons6Solid */

$awesomeicons6Solid = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Solid::class);

For Font Awesome v6 Awesome icons Regular:

/** @var \Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Regular $awesomeicons6Regular */

$awesomeicons6Regular = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Regular::class);

For Font Awesome v6 Awesome icons Brands:

/** @var \Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Brands $awesomeicons6Brands */

$awesomeicons6Brands = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Brands::class);

Then render the icons like this:

<?= $awesomeiconsSolid->addressBookHtml('text-black-500', 24, 24) ?>

<?= $awesomeiconsRegular->addressBookHtml('text-black-500', 24, 24) ?>

Or you may also pass additional attributes like this as an array:

<?= $awesomeicons6Solid->addressBookHtml('text-black-500', 24, 24, ['style'=>'position:relative']) ?>

<?= $awesomeicons6Regular->addressBookHtml('text-black-500', 24, 24, ['style'=>'position:relative']) ?>

Your preview looks like the screenshot below.

How to use Font Awesome icons in Hyvä Themes in CMS content

The Awesome Hyvä module adds an icon directive to render icons in filtered content, such as CMS blocks or pages. This allows you to add icons in text/code blocks using the following syntax:

{{icon "awesomeicons/solid/address-book" classes="text-black-500" width=24 height=24}}

{{icon "awesomeicons6/solid/address-book" classes="text-black-500" width=24 height=24}}

Font Awesome 5 & 6 SVG icons for Hyvä Themes Demo are available with both list view and detail view. You can copy and paste the code to use the icons in your project.

• list of all included v5 icons
• list of all included v6 icons

Awesome Hyvä by JaJuMa Github.

You can also install the following icons in your Hyvä theme:

• Hyvä Flags – Github | Icons list
• FeatherIcons – Github | Icons list
• LucideIcons – Github | Icons list
• Bootstrap Icons – Github | Icons list
• Flags Icons – Github | Icons list

Conclusion

In conclusion, the Hyvä SVG Icon Extensions is a valuable tool for developers and designers working with the Hyvä-themed Magento stores. It simplifies the management and usage of SVG icons, providing a seamless integration with the Hyvä framework. By following the installation and usage instructions outlined in this blog post, you can enhance your web projects with high-quality SVG icons and improve the overall user experience.

More resources on Hyva themes:

• Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
• Hyva Themes Development – For Online Merchants
• Hyvä Theme Benefits that your store needs
• 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
• Hyvä VS PWA: Where to Invest?
• How a Slow Magento Website Can Cost You Advertising Dollars
• Mobile Commerce: How Hyva Themes Boost Mobile Conversions