Hyvä HeroIcons v2

Hyvä themes include HeroIcons v1 by default. You can use it directly with provided ViewModels or the `{{icon}}` CMS directive.

This documentation focuses on HeroIcons v2, the latest version, which can be installed alongside v1.

Installation

Install the package:

composer require hyva-themes/magento2-heroicons2
bin/magento setup:upgrade

This icon pack requires a Hyvä theme license to use.

How to Use

Usage example in `.phtml` files:

<?php

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Heroicons2\ViewModel\Heroicons2Outline;

/** @var ViewModelRegistry $viewModels */

/** @var Heroicons2Outline $heroicons */
$heroicons = $viewModels->require(Heroicons2Outline::class);

Then, render icons similar to HeroIcons v1:

<?= $heroicons->shoppingCartHtml('', 24, 24, ["aria-label" => "Go to Cart Page"]) ?>

Using SVG Icons in CMS Content

Render icons in CMS content using the `{{icon}}` directive.

To determine the SVG file path, locate the SVG file in `view/frontend/web/svg` and remove the `.svg` extension.

For example, `view/frontend/web/svg/heroicons2/24/outline/shopping-cart.svg` becomes `heroicons2/24/outline/shopping-cart`.

Usage example in CMS pages:

{{icon "heroicons2/24/outline/shopping-cart" classes="inline-block" width=24 height=24 title="Go to Cart Page"}}

Extension and Customization

For advanced usage and customization of SvgIcons in Hyvä Themes, refer to the official documentation: SvgIcons in Hyvä Themes.

Available Icons

View the complete list of available icons and versions on the official HeroIcons website: HeroIcons.