jajuma/hyva-flags

This Magento 2 extension provides country & language icons as SVGs for Magento 2 sites using Hyvä Themes

Maintainers

Details

github.com/JaJuMa-GmbH/hyva-flags

Source

Issues

Installs: 589

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 1

Forks: 0

Open Issues: 0

Type:magento2-module

1.0.1 2023-06-16 10:15 UTC

Requires

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

MIT a5a8195a4fcfc7e6d8daafad457ed904a02fe965

  • JaJuMa <info.woop@jajuma.de>

This package is auto-updated.

Last update: 2024-05-22 07:00:13 UTC

README

68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f636f756e7472792d6c616e67756167652d666c61672d69636f6e732d666f722d687976612d7468656d65732d657874656e73696f6e2f487976612d466c6167732d4d6167656e746f2d322d6c617267652e706e67

Hyvä Flags extension by JaJuMa provides country & language icons as SVGs for Magento 2 & Mage-OS sites using Hyvä Themes.



Compatible with

Hyvä Themes Mage-OS Magento
68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d73686f702f6d6167656e746f2d776974682d687976612f4a614a754d612d487976616e6175742d736d616c6c2e706e67 68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f4d6167652d4f532d436f6d70617469626c652e737667 68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f6d6167656e746f2d69636f6e2e737667

Features

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

  • includes almost 1000 country & language flag icons:
    • Square Flag Icons (1:1 ratio)
    • Rectangle Flag Icons (3:2 + 4:3 ratio)
    • Official Flag Sizes &
    • Circle Flag Icons
  • provides 5 ViewModels for adding country & language flag icons in code
  • allows adding country & language flag icons in CMS content from Backend.

Further Info, Extension Description & Manual

Demo

Country & language flag 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:

68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f636f756e7472792d6c616e67756167652d666c61672d69636f6e732d666f722d687976612d7468656d65732d657874656e73696f6e2f687976612d666c6167732d69636f6e2d6c6973742d64656d6f2d6c617267652e6a7067

Note
Need more Icons for Your Hyvä Themes project?
➡️ Check our Awesome Hyvä for Hyvä Themes module for Font Awesome 5 & 6 Icons

Installation

Install via composer as any other Magento extension from github:

composer require jajuma/hyva-flags

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

Using country & language flag icons in Hyvä Themes with JaJuMa "Hyvä Flags" module

How to use country & language flag icons in Hyvä Themes in view models

JaJuMa "Hyvä Flags" module provides 5 view models:

  • Flagicons11
  • Flagicons32
  • Flagicons43
  • FlagiconsCircle
  • FlagiconsOfficial

Require one of the view models in your template:

/** @var \Jajuma\HyvaFlags\ViewModel\Flagicons11 $flagicons11 */
$flagicons11 = $viewModels->require(\Jajuma\HyvaFlags\ViewModel\Flagicons11::class);

/** @var \Jajuma\HyvaFlags\ViewModel\Flagicons32 $flagicons32 */
$flagicons32 = $viewModels->require(\Jajuma\HyvaFlags\ViewModel\Flagicons32::class);

/** @var \Jajuma\HyvaFlags\ViewModel\Flagicons43 $flagicons43 */
$flagicons43 = $viewModels->require(\Jajuma\HyvaFlags\ViewModel\Flagicons43::class);

/** @var \Jajuma\HyvaFlags\ViewModel\FlagiconsCircle $flagiconscircle */
$flagiconscircle = $viewModels->require(\Jajuma\HyvaFlags\ViewModel\FlagiconsCircle::class);

/** @var \Jajuma\HyvaFlags\ViewModel\FlagiconsOfficial $flagiconsofficial */
$flagiconsofficial = $viewModels->require(\Jajuma\HyvaFlags\ViewModel\FlagiconsOfficial::class);

Then render the icons like this:

<?= $flagicons11->acHtml('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:

<?= $flagicons11->acHtml('w-10 h-10', 24, 24, ['style'=>'position:relative']) ?>

How to use country & language flag icons in Hyvä Themes in CMS content

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

{{icon "flagicons/1x1/ac" 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)

Alternative Flag Icons for Hyvä Themes

Credits

Credits for the SVG icons:

Other Magento 2 & Hyvä Themes Extensions by JaJuMa

Other Services by JaJuMa

© JaJuMa GmbH | www.jajuma.de