There are lots of benefits to utilizing SVG for Drupal Development Company icons on an internet site. If you happen to’re not accustomed to SVG (aka Scalable Vector Graphics) it’s an open-standard picture format that makes use of XML to explain graphical photographs. SVG is nice for efficiency, flexibility, and so they look nice on high-resolution shows. Although SVG could be actually helpful, one draw back to implementing them could be Drupal Development Company effort it takes to reuse them throughout a theme in varied .html.twig recordsdata. SVG markup could be advanced as a consequence of Drupal Development Company variety of attributes and, in some circumstances, there may also be a variety of markup. This situation can partially be mitigated through the use of inline SVG with Drupal Development Company <use> aspect coupled with SVG Sprites. Drupal Development mixture of those two is a good answer—however sadly solely will get a part of Drupal Development Company option to ultimate reusability as Drupal Development Company markup remains to be verbose for a single icon, and Drupal Development Company variety of SVG attributes wanted could be onerous to recollect. Wouldn’t it’s good if there was a means to not repeat all this code over once more wherever we needed to make use of an SVG? On this article we define a option to reuse icons throughout template recordsdata in a 8 theme by making a Twig helper perform to reuse Drupal Development Company markup. Implementing a customized Twig customized perform is pretty accessible to these snug with writing customized themes, however due to Drupal Development Company means separates performance between what could be outlined in a Drupal 10 module and what could be outlined in a theme, we might want to create a Drupal 10 module to comprise our customized Twig perform. To get began, create a brand new listing inside <Drupal 10root>/Drupal 10 modules/customized with Drupal Development Company following recordsdata and directories inside it. For Drupal Development Company sake of this text I named Drupal Development Company Drupal 10 module svgy and Drupal Development Company supply is offered on GitHub. svgy ├── src │ └── TwigExtension │ └── Svgy.php ├── svgy.information.yml └── svgy.providers.yml One essential factor to notice right here is that we don’t even have a .Drupal 10 module file in our listing. This isn’t required by , and Drupal Development Company Twig extension which provides our perform might be outlined as a service and autoload Drupal Development Company Svgy.php inside Drupal Development Company src/TwigExtension listing. Don’t fear if you’re unfamiliar with defining customized providers in 8, this text explains all it is advisable know to get going with what we want for our Twig perform. Now that Drupal Development Company listing and file construction is in place, we first want so as to add Drupal Development Company appropriate metadata to svgy.information.yml Drupal 10 Upkeep and Help Service identify Drupal 10 Upkeep and Help Service svgy sort Drupal 10 Upkeep and Help Service Drupal 10 module description Drupal 10 Upkeep and Help Service Add a Twig perform to make utilizing inline SVG simpler. core Drupal 10 Upkeep and Help Service 8.x Subsequent Drupal Development Company needed data must be added to svgy.providers.yml. Drupal Development contents of this file tells to autoload Drupal Development Company Svgy.php file in Drupal Development Company src/TwigExtension listing Drupal 10 Upkeep and Help Service providers Drupal 10 Upkeep and Help Service svgy.twig.extension Drupal 10 Upkeep and Help Service class Drupal 10 Upkeep and Help Service svgyTwigExtensionSvgy tags Drupal 10 Upkeep and Help Service – { identify Drupal 10 Upkeep and Help Service twig.extension } Now that Svgy.php goes to be loaded, add Drupal Development Company code for our Twig perform into it Drupal 10 Upkeep and Help Service <?php namespace svgyTwigExtension; class Svgy extends Twig_Extension { /** * Record Drupal Development Company customized Twig fuctions. * * @return array */ public perform getFunctions() { return [ // Defines a new ‘icon’ function. new Twig_SimpleFunction(‘icon’, array($this, ‘getInlineSvg’)), ]; } /** * Get Drupal Development Company identify of Drupal Development Company service listed in svgy.providers.yml * * @return string */ public perform getName() { return “svgy.twig.extension”; } /** * Callback for Drupal Development Company icon() Twig perform. * * @return array */ public static perform getInlineSvg($identify, $title) { return [ ‘#type’ => ‘inline_template’, ‘#template’ => ‘<span class=”icon__wrapper”><svg class=”icon icon–{{ name }}” role=”img” title=”{{ title }}” xmlns Drupal 10 Maintenance and Support Servicexlink=”http Drupal 10 Maintenance and Support Service//www.w3.org/1999/xlink”><use xlink Drupal 10 Maintenance and Support Servicehref=”#{{ name }}”></use></svg></span>’, ‘#context’ => [ ‘title’ => $title, ‘name’ => $name, ], ]; } } Extra data concerning defining customized Twig extensions is offered right here. For Drupal Development Company objective of this text Drupal Development Company most essential half to elucidate is Drupal Development Company inlineSvgMarkup. This perform takes two arguments Drupal 10 Upkeep and Help Service $identify = Drupal Development Company distinctive #id of Drupal Development Company icon $title = a string used as Drupal Development Company title of Drupal Development Company aspect for higher accessibility When invoked, this perform returns a render array with Drupal Development Company #sort as an inline_template. We use this template sort for 2 causes Drupal 10 Upkeep and Help Service Twig in 8 has built-in filtering for safety causes and utilizing inline_template permits us to get round that extra simply. Since this markup is pretty small and never going to be modified typically, we don’t must create an additional .html.twig file to comprise our SVG code. Implementing Drupal Development Company Customized Operate In A Theme Now that Drupal Development Company customized twig extension for our icon perform is created, how is that this carried out in a theme? An instance of Drupal Development Company following carried out in a theme could be discovered on GitHub. Drupal Development very first thing it’s a must to do is add an inline SVG to your theme. Drupal Development icons inside this SVG ought to have distinctive ids. In most conditions it’s best to generate this SVG “sprite” utilizing one thing like svgstore as a part of your construct course of. However to maintain at present’s instance easy, I’ve created a easy SVG with two icons and positioned it in a theme at <themeroot>/photographs/icons.svg. After Drupal Development Company icons.svg is in place in Drupal Development Company theme you possibly can embody it in in Drupal Development Company rendered web page with Drupal Development Company following in Drupal Development Company [<themename>.theme](https Drupal 10 Upkeep and Help Service//www.Drupal 10.org/docs/8/theming-Drupal 10-8/Drupal 10-8-theme-folder-structure#theme) file Drupal 10 Upkeep and Help Service perform <theme_name>_preprocess_html(&$variables) { // Get Drupal Development Company contents of Drupal Development Company SVG sprite. $icons = file_get_contents( Drupal 10 Upkeep and Help Service Drupal 10 Upkeep and Help Servicetheme()->getActiveTheme()->getPath() . ‘/photographs/icons.svg’); // Add a brand new render array to page_bottom so Drupal Development Company icons // get added to Drupal Development Company web page. $variables[‘page_bottom’][‘icons’] = array( ‘#sort’ => ‘inline_template’, ‘#template’ => ‘<span class=”hidden”>’ . $icons . ‘</span>’, ); } This appends a brand new render array to Drupal Development Company page_bottom variable that’s printed out inside core’s html.html.twig template file. If you happen to haven’t overridden this template in your theme, Drupal Development Company icons will get printed out routinely. When you have overridden html.html.twig in your theme—simply ensure you are nonetheless printing page_bottom inside it Drupal 10 Upkeep and Help Service ({{ page_bottom }} is all you want. Drupal Development .hidden class that’s utilized in Drupal Development Company wrapping <span> right here is one offered by 8 core. It applies show Drupal 10 Upkeep and Help Service none; to Drupal Development Company aspect. This leads to hiding it each visually and from display screen readers. Since Drupal Development Company particular person icons from Drupal Development Company SVG might be referenced elsewhere in Drupal Development Company web page that is Drupal Development Company desired consequence. In Drupal Development Company instance theme on GitHub, this leads to Drupal Development Company following output on Drupal Development Company web page Drupal 10 Upkeep and Help Service <span class=”hidden”><?xml model=”1.0″ encoding=”UTF-8″?> <svg viewBox=”0 0 130 117″ model=”1.1″ xmlns=”http Drupal 10 Upkeep and Help Service//www.w3.org/2000/svg” xmlns Drupal 10 Upkeep and Help Servicexlink=”http Drupal 10 Upkeep and Help Service//www.w3.org/1999/xlink”> <polygon id=”down-arrow” fill=”#50E3C2″ factors=”64.5 117 0 0 129 0″></polygon> <polygon id=”up-arrow” fill=”#50E3C2″ factors=”65.5 0 130 117 1 117″></polygon> </svg></span> Now that Drupal Development Company SVG “sprite” is included on Drupal Development Company web page we are able to begin referencing Drupal Development Company particular person icons inside our SVG sprite with Drupal Development Company customized Twig perform. After you may have cleared ’s cache registry, icons could be added with this Drupal 10 Upkeep and Help Service {{ icon(‘up-arrow’, ‘Navigate up’) }} Drupal Development first argument handed into Drupal Development Company perform right here, up-arrow, is used to reference an current id in Drupal Development Company SVG instance included above. Drupal Development second argument, Navigate up Drupal Development Company web page, is used as Drupal Development Company title of Drupal Development Company SVG to raised describe contents of Drupal Development Company aspect to customers navigating with display screen readers. Drupal Development ensuing markup of this implementation of Drupal Development Company icon() perform when rendered in a web page seems like Drupal 10 Upkeep and Help Service <span class=”icon__wrapper”> <svg class=”icon icon–up-arrow” function=”img” title=”Navigate up” xmlns Drupal 10 Upkeep and Help Servicexlink=”http Drupal 10 Upkeep and Help Service//www.w3.org/1999/xlink”> <use xlink Drupal 10 Upkeep and Help Servicehref=”#up-arrow”></use> </svg> </span> As you possibly can see, Drupal Development Company ensuing markup is far bigger than simply Drupal Development Company single line the place we used Drupal Development Company icon() Twig perform. This makes it rather a lot cleaner to reuse icons all through our .html.twig recordsdata. Along with making templates simpler to learn and never having to recollect all Drupal Development Company needed <svg> attributes, we additionally guarantee consistency in how icons get included all through Drupal Development Company mission. As themers, it’s nice to have flexibility like this offered by Twig. If you happen to’re serious about digging deeper into different forms of Twig extensions, I encourage you to checkout Drupal Development Company Twig Tweak Drupal 10 module, which has examples of different useful Twig extensions. Have extra questions on SVG? Listed here are another useful articles Record of default Twig features Twig features offered by core “Icon System with SVG Sprites” from CSS-Tips Find out how to Use SVG Picture Sprites Drupal 10 Growth and Help