Hyvä Flags for Magento 2 & Mage-OS with Hyvä Themes by JaJuMa

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

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

• Extension Website EN
• Extension Website DE

Demo

Country & language flag icons for Hyvä Themes Demo:

• On Hyvä Theme with Magento
• On Hyvä Theme with Mage-OS

Icon List

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

• Demo & List of all included flag icons

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

• HyvaIconsFlags by Siteation

Credits

Credits for the SVG icons:

• Square & Rectangle Format 4:3: @lipis
• Rectangle Format 3:2: @catamphetamine
• Circle format: @HatScripts
• Official sizes: @hampusborgos

Other Magento 2 & Hyvä Themes Extensions by JaJuMa

• 🖼️ Performance & UX:
  Ultimate Image Optimizer for Magento 2
  AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images

• 🖼️ Performance & UX:
  WebP Optimized Images for Magento 2
  The #1 WebP Images Solution for Magento 2

• 🙈 SEO:
  PRG Pattern Link Masking for Magento 2
  Link Masking for Layered Navigation

• 👮 User Experience:
  Shariff Social Share for Magento 2
  GDPR compliant and customizable Sharing Buttons

• 🎥 Content Management:
  Video Widget for Magento 2
  Embedding YouTube videos, GDPR compliant with auto preview image & fully responsive

• 🚀 Performance & UX:
  Page Preload for Magento 2
  Faster faster page transitions and subsequent page-loads by preloading / prefetching

• 📈 Marketing:
  Matomo Analytics for Magento 2
  Web Analytics - GDPR Compliant

• 🍯 Site Optimization:
  Honey Spam Anti-Spam for Magento 2
  Spam Protection - Reliable & GDPR Compliant

• 🔔 Marketing:
  Customer Registration Reminder & Cleanup for Magento 2
  Increase Your Customer Engangement & Cleanup your Customer Account Data Automatically

• 📣 UX & Marketing:
  Category Grid Callouts for Magento 2
  Enrich Your Category Grids With Eye-Catching Callouts

• 💭 UX & Marketing:
  Customer Satisfaction Feedback for Magento 2
  Collect Valuable Feedback From Your Customers & Understand How To Satisfy Your Customers

• 🎇 UX:
  Auto Select Options for Magento 2
  Automatically Select Configurable & Custom Options Based On Your Customer's Preferences

• ↔️ UX & Performance:
  Back Forward Cache - bfcache for Magento 2
  Enable bfcache for Magento 2 for improved UX & Core Web Vitals

• ➗ Accounting:
  Dynamic Shipping Tax Plus for Magento 2
  Dynamic Shipping Tax Calculation incl. pro-rata/proportional tax rates

• 🔍 Search:
  MySQL Search for Magento 2
  MySQL Search for Magento 2 without Elasticsearch

• ‼️ Performance:
  Preload Critical Resources & Assets
  Resource Hints for preloading important and critical resources

• Content Management:
  git 4 Page Builder
  Manage & deploy Magento 2 Page Builder content via git

• 🚀 Performance:
  Hyvä Inline CSS
  Run Magento 2 without CSS file by inline all CSS

• 👨‍💻 🆓 Content Management:
  Syntax Highlighter 4 Page Builder
  Syntax Highlighting and more for Magento 2 Page Builder

• 🚩 🆓 UI & UX:
  Awesome Hyvä for Hyvä Themes
  Font Awesome 5 & 6 Icons for your Hyvä Themes Store

• 🚩 🆓 UI & UX:
  Hyvä Flags for Hyvä Themes
  Country & Language Flag Icons for your Hyvä Themes Store

• 🙆‍♂️ 🆓 User Experience:
  Customer Navigation Manager for Magento 2
  Easily manage the links in your Customer Account

• ➗ 🆓 Accounting:
  Dynamic Shipping Tax for Magento 2
  Dynamic Shipping Tax Calculation

• ❓ 🆓 Content:
  Hyvä FAQ Widget for Hyvä Themes
  FAQ Widget for your Hyvä Themes Store

• 🧩 🆓 Admin Tools:
  Magento Power Toys
  Tools and helpers, a.k.a "Toys", for Magento Admins

Other Services by JaJuMa

• 🛍️ JaJuMa-Market: Marketplace Software
  Complete Online Marketplace Software Solution. For Professional Demands. Feature Rich. Flexibly Customizable.

• 🛒 JaJuMa-Shop
  Customized Magento Shop Solutions.

• 🚀 JaJuMa-Shop: Hyvä Magento Shop Development
  Hyvä Magento Shop Development.

• 📙 JaJuMa-Shop: Magento Handbuch in Deutsch
  Magento Handbuch in Deutsch.

• 🗂️ JaJuMa-PIM
  Product Information Management. Simple. Better.

• ➕ JaJuMa-Develop: Magento 2 Extensions
  Individual Solutions For Your Business Case.

• 🖌️ JaJuMa-Design
  Designs That Inspire.

• 👔 JaJuMa-Consult
  We Show You New Perspectives.

© JaJuMa GmbH | www.jajuma.de