jajuma/phosphorhyva

This Magento 2 extension allows using Phosphor icons with Hyvä Themes

Maintainers

Details

github.com/JaJuMa-GmbH/phosphor-hyva

Source

Issues

Installs: 3

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 0

Open Issues: 0

Type:magento2-module

1.0.0 2025-03-25 04:55 UTC

Requires

  • hyva-themes/magento2-theme-module: >=1.1.12

MIT ebd1a43e2acf5bdffb9adf8dc4224e4198e70e46

  • JaJuMa <info.woop@jajuma.de>

This package is auto-updated.

Last update: 2025-03-25 05:06:51 UTC

README

Phosphor Hyvä extension by JaJuMa allows using Phosphor Icons as SVGs on Magento 2 & Mage-OS sites using Hyvä Themes.



Compatible with

Hyvä Themes Mage-OS Magento

Features

Phosphor Hyvä for Magento & Mage-OS with Hyvä Themes

  • includes 9000+ icons,
  • covering a huge range of topics,
  • including brands
  • in 6 different styles
    • Thin
    • Light
    • Regular
    • Bold
    • Fill
    • Duotone
  • allows adding Phosphor Icons in Code
  • allows adding Phosphor Icons in CMS content from Backend.

Further Info, Extension Description & Manual

Demo

Phosphor SVG icons for Hyvä Themes Demo:

Icon List

List view and detail view with all included icons for copy & paste the code to use the icons in your project:

Installation

Install via composer as any other Magento extension from github:

composer require jajuma/phosphorhyva

or get it from Extension Website for manual installation in app/code/ as any other Magento extension.

Using Phosphor Icons in Hyvä Themes with JaJuMa "Phosphor Hyvä" module

How to use Font Phosphor Icons in Hyvä Themes in view model

JaJuMa "Phosphor Hyvä" module provides following view model:

  • Phosphoricons

Require the view models in your template:

/** @var \Jajuma\PhosphorHyva\ViewModel\Phosphoricons $phosphoricons */
$phosphoricons = $viewModels->require(\Jajuma\PhosphorHyva\ViewModel\Phosphoricons::class);

Then render the icons like this:

  • Regular style:
<?= $phosphoricons->acornHtml('text-red-100', 24, 24) ?>
  • Other styles, include the desired style (Thin, Light, Bold, Fill, Duotone) as in following example:
<?= $phosphoricons->acornBoldHtml('text-red-100', 24, 24) ?>
  • The method name is the camel cased icon name, followed by Html.
  • In an IDE you should have autocompletion for all available methods.
  • The parameters are optional, and change the class (in single quotes) followed by 2 values for width and height attributes of the SVG element.
  • It is recommended to set all of them, so that the images are not rendered in huge sizes if CSS fails to load.

or you may also pass additional attributes like this as an array:

<?= $phosphoricons->acornHtml('text-red-100', 24, 24, ['style'=>'position:relative']) ?>

How to use Phosphor Icons in Hyvä Themes in CMS content

Phosphor Hyvä module adds an icon directive to render icons in filtered content like CMS blocks or pages. So you may add icons in text / code blocks like this:

  • Regular style:
{{icon "phosphoricons/acorn-bold" classes="text-red-100" width=12 height=12}}
  • Other styles, include the desired style (Thin, Light, Bold, Fill, Duotone) as in following example:
{{icon "phosphoricons/acorn-bold" classes="text-red-100" width=12 height=12}}
  • "classes" parameter is used for setting any css class.
  • "width"/"height" parameters are used for setting width/height attributes for icons.
  • Hint: You may get the code snippets for copy & paste for each icon on the demo - see link below.

License

The code is licensed under the MIT License (MIT)

Other Magento 2 & Hyvä Themes Extensions by JaJuMa

Other Services by JaJuMa

© JaJuMa GmbH | www.jajuma.de