Module Description
This module adds a simple method to include inline SVGs in twig templates.
To configure: 1. Ensure your combined SVG file is in your default theme /images/ folder - I'd recommend using Gulp to do this. @see
https://www.npmjs.com/package/gulp-cheerio https://www.npmjs.com/package/gulp-svgstore https://www.npmjs.com/package/gulp-svgstore#transform-svg-sources-or-com...
2. Enable the Twig SVG module 3. To include an SVG icon in a twig template, add the following in the relevant html.twig file:
{{ icon('icon-name', 'Icon title') }}
Optionally, to add a title, classes, and additional attributes: {{ icon('icon-name', 'Icon title', ['extra-class', 'another-class'], {'name-one': 'value-one', 'name-two': 'value-two'}) }}
Credit to https://www.lullabot.com/articles/better-svg-sprite-reuse-in-drupal-8 for the fundamentals of this.
To configure: 1. Ensure your combined SVG file is in your default theme /images/ folder - I'd recommend using Gulp to do this. @see
https://www.npmjs.com/package/gulp-cheerio https://www.npmjs.com/package/gulp-svgstore https://www.npmjs.com/package/gulp-svgstore#transform-svg-sources-or-com...
2. Enable the Twig SVG module 3. To include an SVG icon in a twig template, add the following in the relevant html.twig file:
{{ icon('icon-name', 'Icon title') }}
Optionally, to add a title, classes, and additional attributes: {{ icon('icon-name', 'Icon title', ['extra-class', 'another-class'], {'name-one': 'value-one', 'name-two': 'value-two'}) }}
Credit to https://www.lullabot.com/articles/better-svg-sprite-reuse-in-drupal-8 for the fundamentals of this.
Module Link
Project Usage
161
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the problem of including inline SVGs in twig templates by providing a simple method to do so.
Data Name
twig_svg