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

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:

  1. Require one of the Heroicons view models in your template:
// 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);
  1. Then render the icons like this:
<?= $heroicons->arrowLeftHtml('w-8 h-8') ?>
  1. 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.
<?= $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.

{{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

{{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.

<?= $heroicons->userCircleHtml(
    'h-6 w-6 text-slate-800 hover:text-black',
    32,
    32,
    ['aria-hidden' => 'true']
); ?>
hyva vendor iconOld Icon
hyva theme old icon
Updated Icon
hyva theme 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.

$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:

  1. No role=”img” attribute is present.
  2. 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:

  1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
  2. Hyva Themes Development – For Online Merchants
  3. Hyvä Theme Benefits that your store needs
  4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
  5. Hyvä VS PWA: Where to Invest?
  6. How a Slow Magento Website Can Cost You Advertising Dollars
  7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions
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 3,494 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.