SvgIcons View Model

The SvgIcons view model is the foundation for Hyvä icon packs. You can extend it with your own icon sets, either by creating a new module or by loading icons directly from your theme.

Using the SvgIcons view model

<?php

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

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

Render icons using this syntax:

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

Method names are camel-cased icon names, suffixed with Html.

All methods accept these optional arguments:

string $classnames = '', ?int $width = 24, ?int $height = 24, array $attributes = []

These parameters control the SVG element's class, width, height, and allow adding extra HTML attributes.

Although not recommended, you can remove the SVG width and height attributes by passing null for the second and third arguments:

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

Icon Pack Options

Hyvä and third-party modules provide various icon pack options. For available options, refer to the Hyvä Icons Docs.

Using a Custom SVG Icon Set in Your Theme

Extend existing icon packs or add your own custom icons directly within your theme. For a complete guide, see the Custom Icons Docs.

Accessibility

For decorative icons, hide them from assistive technologies (ATs) by adding aria-hidden="true".

If an icon is not decorative and meets these conditions:

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

the \Hyva\Theme\ViewModel\SvgIcons automatically adds a <title>Icon Name</title> node inside the <svg> tag (before the <path>) to provide assistive technologies with icon information.