Integrate automated SVG sprite extraction
Edit on GitHubThis guide describes how to integrated automated SVG sprite extraction for scalable icon management in Yves.
- Update ShopUi to 1.93.1 or higher:
composer require spryker-shop/shop-ui:^1.93.1
-
Create the sprite file:
/frontend/assets/global/default/icons/sprite.svg
. -
Add all symbols from
src/Pyz/Yves/ShopUi/Theme/default/components/atoms/icon-sprite/icon-sprite.twig
as SVG icons tosprite.svg
:
/frontend/assets/global/default/icons/sprite.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<!-- Put SVG icons here -->
</svg>
- Add or update the icon component file:
src/Pyz/Yves/ShopUi/Theme/default/components/atoms/icon/icon.twig
{% extends atom('icon', '@SprykerShop:ShopUi') %}
{% define data = {
name: required,
isSpriteGenerationEnabled: true,
} %}
- Use the icon component in your Twig templates. The new approach uses a pregenerated or manually created SVG sprite. You no longer need to maintain or update
icon-sprite.twig
. Usage example:
{% include atom('icon') with {
data: {
name: 'search',
},
} only %}
- Optional: If your sprite is located at a different path, you can create or update the
icon.twig
component to use a custom path:
src/Pyz/Yves/ShopUi/Theme/default/components/atoms/icon/icon.twig
{% extends atom('icon', '@SprykerShop:ShopUi') %}
{% define data = {
name: required,
isSpriteGenerationEnabled: true,
} %}
{% block body %}
<use xlink:href="{{ publicPath('icons/sprite.svg#:' ~ data.name) }}"></use>
{% endblock %}
- Optional: Remove
icon-sprite.twig
because it’s no longer used.
Thank you!
For submitting the form