PHPackages ocubom/twig-svg-extension - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. ocubom/twig-svg-extension ActiveLibrary[Templating & Views](/categories/templating) ocubom/twig-svg-extension ========================= A custom suite of Twig filters for SVG manipulation v2.3.0(2y ago)42.6k1MITPHPPHP >=7.4 Since Dec 31Pushed 2y ago1 watchersCompare [ Source](https://github.com/ocubom/twig-svg-extension)[ Packagist](https://packagist.org/packages/ocubom/twig-svg-extension)[ Docs](https://github.com/ocubom/twig-svg-extension)[ RSS](/packages/ocubom-twig-svg-extension/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (11)Versions (12)Used By (1) Ocubom Twig SVG Extension ========================= [](#ocubom-twig-svg-extension) A custom suite of Twig filters for SVG manipulation [![Contributors](https://camo.githubusercontent.com/78a16a5c3436726ce56bb71c0a7b2add1638b0a1d7691658435447076b96558f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f636f6e7472696275746f72732f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/ocubom/twig-svg-extension/graphs/contributors)[![Forks](https://camo.githubusercontent.com/c5b618718d3946db4458cdf1165f4ef73ef797170cf6e1f52a6cbffee66f310b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/ocubom/twig-svg-extension/network/members)[![Stargazers](https://camo.githubusercontent.com/06970b842c7a52129c573bd47d95ebd01060728e40b48401b36cf2118a25a4a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/ocubom/twig-svg-extension/stargazers)[![Issues](https://camo.githubusercontent.com/9bd894315db9740799ba8a2f5728c53c6e76df54951e007102a405d1e27615a6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/ocubom/twig-svg-extension/issues)[![License](https://camo.githubusercontent.com/3d069578fd84c77ad678bcf558d8b213d1539cfce688562e1ebf240e5a8743db/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/ocubom/twig-svg-extension/blob/master/LICENSE) [![Version](https://camo.githubusercontent.com/1ab0a362a6925b030ffba140a9cb757cad79bf77d99d13e8b27176afda1352aa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f6c6f676f3d7061636b6167697374266c6f676f436f6c6f723d253233666566656665267374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/ocubom/twig-svg-extension)[![CI](https://camo.githubusercontent.com/21cf343e470a71f20352adca40ce4bbcd617cafc14c2e2e60832bbde566731e3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6f6375626f6d2f747769672d7376672d657874656e73696f6e2f63692e796d6c3f6272616e63683d6d61696e266c6162656c3d4349266c6f676f3d676974687562267374796c653d666f722d7468652d6261646765)](https://github.com/ocubom/twig-svg-extension/actions/)[![Code Quality](https://camo.githubusercontent.com/a9bd2fe738c3fd1f9fc7b2f6bee21f345ce307daf7b753d01f34ad8005f6f1d0/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f7175616c6974792f672f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f6c6f676f3d7363727574696e697a6572266c6f676f436f6c6f723d666666267374796c653d666f722d7468652d6261646765)](https://scrutinizer-ci.com/g/ocubom/twig-svg-extension/)[![Coverage](https://camo.githubusercontent.com/270e775fe6d45f9fb619b98f09001dd9744a5f6ed78920d8d494df7d621c39c9/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f636f7665726167652f672f6f6375626f6d2f747769672d7376672d657874656e73696f6e2e7376673f6c6f676f3d7363727574696e697a6572266c6f676f436f6c6f723d666666267374796c653d666f722d7468652d6261646765)](https://scrutinizer-ci.com/g/ocubom/twig-svg-extension/code-structure/main/code-coverage) [**Explore the docs »**](https://github.com/ocubom/twig-svg-extension) [Report Bug](https://github.com/ocubom/twig-svg-extension/issues)· [Request Feature](https://github.com/ocubom/twig-svg-extension/issues) Contents- [About TwigSvgExtension](#about-twigsvgextension) - [Getting Started](#getting-started) - [Installation](#installation) - [Usage](#usage) - [Roadmap](#roadmap) - [Contributing](#contributing) - [Authorship](#authorship) - [License](#license) About TwigSvgExtension ---------------------- [](#about-twigsvgextension) [TwigSvgExtension](https://github.com/ocubom/twig-svg-extension) is a custom suite of **[Twig filters](https://twig.symfony.com/doc/3.x/advanced.html#filters)** for SVG manipulation. This suite started as an internal class to inline SVG files into HTML documents. This class used to be embedded into several projects. Over time, each project adapted its version slightly, leading to fragmented development and difficult maintenance. Therefore, the development is unified in this extension which is made public in case it is useful for other projects. Getting Started --------------- [](#getting-started) ### Installation [](#installation) Just use [composer](https://getcomposer.org/) to add the dependency: ``` composer require ocubom/twig-svg-extension ``` Or add the dependency manually: 1. Update `composer.json` file with the lines: ``` { "require": { "ocubom/twig-svg-extension": "^2.0.0" } } ``` 2. And update the dependencies: ``` composer update "ocubom/twig-svg-extension" ``` ### Usage [](#usage) Just register the Twig extension: ``` $twig = new \Twig\Environment(); $twig->addExtension(new \Ocubom\Twig\Extension\SvgExtension()); $twig->addRuntimeLoader([ \Ocubom\Twig\Extension\SvgRuntime::class => function () use ($paths) { return new \Ocubom\Twig\Extension\SvgRuntime( new \Ocubom\Twig\Extension\Svg\Provider\FileSystem\FileSystemLoader($paths) ); }, \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime::class => function () use ($paths) { return new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime( new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeLoader($paths) ); }, \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime::class => function () use ($paths) { return new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime( new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyLoader($paths) ); }, ]); // You can also dynamically create a RuntimeLoader $twig->addRuntimeLoader(new class() implements RuntimeLoaderInterface { public function load($class) { if (\Ocubom\Twig\Extension\SvgRuntime::class === $class) { return new \Ocubom\Twig\Extension\SvgRuntime( new \Ocubom\Twig\Extension\Svg\Provider\FileSystem\FileSystemLoader($paths) ); } if (\Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime::class === $class) { return new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeRuntime( new \Ocubom\Twig\Extension\Svg\Provider\FontAwesome\FontAwesomeLoader($paths) ); } if (\Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime::class === $class) { return new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyRuntime( new \Ocubom\Twig\Extension\Svg\Provider\Iconify\IconifyLoader($paths) ); } return null; } }); ``` The extension defines several filters and functions. ### SVG Extension Core [](#svg-extension-core) #### `svg` function [](#svg-function) The svg function embeds an SVG defined in an external file into the template. ``` {{ svg('path/to/file.svg', {option: value}) }} ``` The path is relative to the search path provided as the first argument when creating the runtime. ``` new \Ocubom\Twig\Extension\SvgRuntime( new \Ocubom\Twig\Extension\Svg\Provider\FileSystem\FileSystemLoader( new \Ocubom\Twig\Extension\Svg\Util\PathCollection( 'first/search/path', 'second/search/path', ) ) ); ``` The second argument can be used to add some attributes to the root element: ``` {{ svg('test', { 'class': 'custom svg class', 'title': 'This is a semantic title', }) }} ``` #### `svg` (or `svg_symbols`) filter [](#svg-or-svg_symbols-filter) This filter looks for embedded SVGs and converts each of them into a reference to a symbol. > **Warning** > > The filter must be applied at an HTML document level. > > If the filter is used in a fragment, an exception will be generated. ``` {%- apply svg -%} {%- endapply -%} ``` > **Note** > > The `svg` function can be used to embed SVG files that will be converted with this filter. ### FontAwesome Provider [](#fontawesome-provider) #### `fa` function [](#fa-function) Generates a simple FontAwesome HTML tag: ``` {{ fa('home', {title: "This is a title"}) }} ``` Will generate: ``` ``` > **Warning** > > The result may be slightly different. The order of the attributes or their values may vary. #### `fontawesome` filter [](#fontawesome-filter) This filter looks for FontAwesome tags and replaces them by embedding the corresponding SVG. > **Warning** > > The filter must be applied at HTML document level. > > If the filter is used in a fragment, an exception will be generated. ``` {%- apply fontawesome -%} {%- endapply -%} ``` > **Note** > > The `fa` function can be used to generate the tags. ### Iconify Provider [](#iconify-provider) #### `iconify` filter [](#iconify-filter) This filter looks for Iconify SVG Framework or Web Component and replaces them by embedding the corresponding SVG. > **Warning** > > The filter must be applied at HTML document level. > > If the filter is used in a fragment, an exception will be generated. ``` {%- apply iconify -%} {%- endapply -%} ``` Roadmap ------- [](#roadmap) See the [open issues](https://github.com/ocubom/twig-svg-extension/issues) for a full list of proposed features (and known issues). Contributing ------------ [](#contributing) Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". 1. Fork the Project. 2. Create your Feature Branch (`git checkout -b feature/your-feature`). 3. Commit your Changes (`git commit -m 'Add your-feature'`). 4. Push to the Branch (`git push origin feature/your-feature`). 5. Open a Pull Request. Authorship ---------- [](#authorship) - Oscar Cubo Medina — See also the list of [contributors](https://github.com/ocubom/twig-svg-extension/graphs/contributors) who participated in this project. License ------- [](#license) Distributed under the MIT License. See [LICENSE](https://github.com/ocubom/twig-svg-extension/blob/master/LICENSE) for more information. ### Health Score 29 — LowBetter than 60% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity22 Limited adoption so far Community9 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~34 days Recently: every ~61 days Total 11 Last Release 889d ago Major Versions v1.1.2 → v2.0.02023-03-26 ### Community Maintainers ![](https://www.gravatar.com/avatar/642ac779b1c36bfa6dfae27c756efcf88f75ff34fd50b376a72acb05e845502d?d=identicon)[ocubom](/maintainers/ocubom) --- Top Contributors [![ocubom](https://avatars.githubusercontent.com/u/184187?v=4)](https://github.com/ocubom "ocubom (24 commits)") --- Tags svgtwigtwig-extensiontwigsvgtwig-extension ### Code Quality Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/ocubom-twig-svg-extension/health.svg) ``` [![Health](https://phpackages.com/badges/ocubom-twig-svg-extension/health.svg)](https://phpackages.com/packages/ocubom-twig-svg-extension) ``` ### Alternatives [twig/cssinliner-extra A Twig extension to allow inlining CSS 23018.5M55](/packages/twig-cssinliner-extra)[symfony/ux-twig-component Twig components for Symfony 21814.8M162](/packages/symfony-ux-twig-component)[twig/inky-extra A Twig extension for the inky email templating engine 16612.5M47](/packages/twig-inky-extra)[twig/markdown-extra A Twig extension for Markdown 12114.3M83](/packages/twig-markdown-extra)[symfony/ux-live-component Live components for Symfony 1635.6M72](/packages/symfony-ux-live-component)[twig/html-extra A Twig extension for HTML 777.6M41](/packages/twig-html-extra) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)