How to install and use Hyvä SVG Icon Extensions?
Chapters Close

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.

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.

HeroIcons in Hyva Preview

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:

There are currently 3 implementations: solidoutline 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.

HeroIcons2 In Hyva

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:

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.

brand icon preview

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.

Awesome Hyvä by JaJuMa Github.

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

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:

Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Grow your online business like 4,419 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.