SVG Sprite
This module allows you to manage and display icons from SVG sprite files. It provides a field type to select icons from a dropdown, automatically populated from your sprite's symbol IDs. Icons can then be easily inserted into content or Twig templates.
This module adds a new field type called SVG Sprite. Using this field you can select an icon from a dropdown list which is auto-generated from a SVG Sprite file.
It reads the SVG Sprite and automatically adds every <symbol id="">...</symbol> to the list, which is typically how SVG Sprites are generated.
It outputs something similar to file.svg#symbol-id using a dedicated field formatter.
A submodule is available to allow insertion of SVG sprites in CKEditor 5 WYSIWYG editor.
A small Twig extension is also available allowing to easily add an SVG sprite into your Twig templates.
Example: {{ svg_sprite('lightbulb') }}.
You can add custom attributes to your sprite Twig function:
{{ svg_sprite('lightbulb', {'class': 'my_css_class'}) }}
This will produce:
<svg class="sprite sprite-lightbulb my_css_class"...>
...
</svg>
An experimental token is also available: [svg_sprite:sprite:lightbulb] but might requires to allow svg and use HTML tags rendering in some contexts like Views (XSS).
A small utility function in the SvgSpriteHelper class shows how to programmatically override the Xss::$adminTags property to allow the use of the svg and use HTML tags.
Similar or related projects
- SVG Icon
- SVG Sprite Icon Field (obsolete)