SVG Sprite

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)