Skip to content

SvgIcons

The generic SvgIcons view model can be used to render any icon set (i.e. subdirectory in web/svg).

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

  • HeroiconsSolid
  • HeroiconsOutline

You can find and preview these icons at https://v1.heroicons.com/

Using the Heroicons view models in templates

Require one of the Heroicons view models in your template:

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

Then render the icons like this:

<?= $heroicons->arrowLeftHtml('', 32, 32) ?>

The method name is the camel cased icon name, followed by Html. Your IDE should offer autocompletion for all available icons.

All methods take the following arguments: 

string $classnames = '', ?int $width = 24, ?int $height = 24, array $attributes = []
All parameters are optional, and change the class , width and height attributes of the SVG element, or add additional HTML attributes.

While it's not recommended to remove the SVG width and a height attribute, you can do so by passing null as the second and third argument.

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

Using SVG icons in CMS content

The Hyvä theme module adds an icon directive to render any SVG icon in filtered content like CMS blocks or pages.

{{icon "heroicons/solid/shopping-cart" classes="text-primary" width=24 height=24}}

Custom icons stored in web/svg/ such as web/svg/cart.svg can be referenced as

{{icon "cart"}}

This directive is processed by the Hyva\Theme\Model\Template\IconProcessor.

Note

On the topic of SVG in CMS content, the module Hyvä WysiwygSvg allows users to paste raw SVG markup into the CMS editor. At the time of writing, the module is not installed by default.

The WysiwygSvg module is independent of the SvgIcon view model, each serves a different purpose.

Overriding heroicons in your theme

The SVGs are located in web/svg/heroicons/outline and web/svg/heroicons/solid. Magento’s theme fallback mechanism applies, so you can override the files in your theme.

For example if you want to use a newer Heroicons package than the one shipped with Hyvä, you can place the files in your theme at Hyva_Theme/web/svg/heroicons/solid and Hyva_Theme/web/svg/heroicons/outline. For new icons you will not have IDE autocompletion but you can use the methods anyways (Magic! 🪄).

E.g. to render magic-wand.svg, call

$heroicons->magicWandHtml($class, $width, $height)

or alternatively

$heroicons->renderHtml('magic-wand', $class, $width, $height)

(which is what happens under the hood of the magic methods).

Using a custom SVG icon set in your theme

For a theme specific icon set, create a subdirectory in the theme at Hyva_Theme/web/svg and place your SVG icons there.

Then instantiate the \Hyva\Theme\ViewModel\SvgIcons view model in your template and call either renderHtml or the magic method matching the desired icon name.

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\SvgIcons;

/** @var ViewModelRegistry $viewModels */

/** @var SvgIcons $hyvaicons */
$hyvaicons = $viewModels->require(SvgIcons::class);

echo $hyvaicons->renderHtml('rainbow-unicorn', '', 24, 24); // either
echo $hyvaicons->rainbowUnicornHtml('', 24, 24); // or

Accessibility

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

Otherwise, if both of these conditions are true:

  • there is no role="img" attribute
  • there is no aria-hidden="true" attribute

the \Hyva\Theme\ViewModel\SvgIcons will add a <title>Icon Name</title> node inside the <svg> tag before the <path> to ensure AT can provide the visitor with some information about the icon.

A11y related processing of SVG Icon attributes was released in Hyvä 1.3.0