Hyvä Themes manage SVG icons using a dedicated SvgIcons module. By default, it uses a customized Lucide Icons set.
Developers can render icons efficiently in PHTML templates via ViewModels or in CMS content using the {{icon “icon-name”}} directive. Integrate custom SVG icons by placing them in the theme’s web/svg directory.
Here are the exact steps to add icons and images to Hyvä checkout.
Why Use SVGs for Checkout Icons
- Scalability: SVGs remain crisp at any resolution, appearing sharp on all devices without pixelation.
- Performance: Often smaller than raster images, SVGs contribute to faster checkout page load times.
- Flexibility: CSS easily styles SVGs, enabling dynamic color, size, and animation adjustments.
Add Custom Icons to Your Hyvä Checkout
Optimize SVG icon files before integration. Ensure they are clean, minimized, and free of unnecessary code. Design icons as monochrome for easy CSS color manipulation. Use lowercase filenames with hyphens (e.g., custom-cart.svg) for smooth rendering and compatibility within Hyvä’s icon system.
Place prepared SVG files in your Hyvä theme’s web/svg directory. For example, a theme at app/design/frontend/Vendor/Theme uses app/design/frontend/Vendor/Theme/web/svg/. Create subdirectories (e.g., web/svg/checkout-icons/) to organize assets.
app/design/frontend/Vendor/Theme/web/svg/custom-checkout.svg
app/design/frontend/Vendor/Theme/web/svg/checkout-icons/payment-card.svg
To display custom icons in a PHTML template, instantiate the SvgIcons ViewModel. Use its renderHtml() method, passing the icon’s filename without the .svg extension. Alternatively, convert kebab-case filenames to camelCase and append Html to use magic methods.
<?php
use Hyvä\Theme\ViewModel\SvgIcons;
/** @var SvgIcons $Hyväicons */
$Hyväicons = $viewModels->require(SvgIcons::class);
?>
<?= $Hyväicons->renderHtml('custom-checkout', 'w-6 h-6 text-primary') ?>
<?= $Hyväicons->paymentCardHtml('w-5 h-5') ?>
Integrate Payment Method Icons in Checkout
Hyvä Theme architecture use the Siteation/magento2-Hyvä-icons-payment module for built-in payment icons. This module displays common logos like Visa, Mastercard, and PayPal automatically. Using these pre-packaged icons ensures consistency and speeds up development.
For custom payment gateways, integrate your own icons. Prepare SVG icon files and place them in your theme’s web/svg/payment directory. Then, in your payment method’s PHTML template, use Hyvä’s SvgIcons ViewModel to render the custom icon by referencing its filename.
<?= $Hyväicons->renderHtml('payment/your-gateway', 'w-6 h-6') ?>
Best Practices for Checkout Icon Implementation
- Implement alt text for descriptive icons, providing context for screen readers.
- Use ARIA labels on functional icons without visible text to improve navigation for assistive technologies.
- Ensure icons have adequate color contrast to meet WCAG guidelines.
- Minify SVG files to reduce their size and accelerate page load times.
- Use browser caching for SVG assets to prevent repeated downloads.
- Consider inlining critical, small SVGs to reduce HTTP requests, improving initial render speed.
Troubleshoot Common Icon Issues in Hyvä Checkout
Icon Not Displaying:
- Verify the SVG icon file path in your theme’s web/svg directory.
- Ensure bin/magento setup:static-content:deploy ran successfully in production mode.
- Check the browser’s developer console for 404 errors related to the SVG file.
- Confirm TailwindCSS compilation (npm run build) completed without errors.
Styling and Sizing Issues:
- Use CSS classes directly on the <svg> element or its parent to control size and color.
- Inspect browser developer tools (DOM inspector) to identify conflicting or overridden styles.
- Review your TailwindCSS purge configuration to prevent accidental removal of icon styles.
- Ensure custom CSS overrides load after Hyvä’s default styling.
And that’s a wrap on how to add icons and images to Hyvä Checkout. Try this solution yourself and if you need any help in managing this task, contact us today.
