PHPackages c1/c1-svg-viewhelpers - 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. c1/c1-svg-viewhelpers ActiveTypo3-cms-extension[Templating & Views](/categories/templating) c1/c1-svg-viewhelpers ===================== SVG viewhelpers - include SVGs as symbol files in TYPO3 1.1.0(3y ago)05261[1 PRs](https://github.com/mmunz/c1_svg_viewhelpers/pulls)GPL-2.0+PHP Since Aug 14Pushed 3y ago1 watchersCompare [ Source](https://github.com/mmunz/c1_svg_viewhelpers)[ Packagist](https://packagist.org/packages/c1/c1-svg-viewhelpers)[ Docs](https://www.comuno.net)[ RSS](/packages/c1-c1-svg-viewhelpers/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (10)Versions (5)Used By (0) C1 SVG viewhelpers ================== [](#c1-svg-viewhelpers) SVG related ViewHelpers for TYPO3 Fluid. Installation ------------ [](#installation) via composer: ``` composer req c1/c1-svg-viewhelpers ``` Configuration ------------- [](#configuration) 1. Include the static TypoScript setup and constants 2. Create a symbols file and CSS (or SCSS or LESS) classes, see below 3. Include the generated S(CSS) or LESS files 4. Configure the presets in the TypoScript constants and or setup, i.e. set plugin.tx\_c1svgviewhelpers.settings.svg.symbol.presets.default to point to the generated symbol file and add more preset keys if needed. For convenience you should always keep the default key which allows you to use the svgvh:symbol viewhelper without providing the symbolFile argument. 5. Add basic CSS for the icons to properly display. E.g. if your icons are prefixed with .icon-default: ``` .icon-default { display: inline-block; >svg { width: 100%; height: 100%; } } ``` ViewHelpers ----------- [](#viewhelpers) ### svgvh:symbol [](#svgvhsymbol) Renders an icon from an SVG symbol file. The icon is wrapped in a span tag as SVG with an xlink:href attribute referencing an external SVG symbols file. Using an SVG symbols file has some benefits, e.g. - the symbol file is cacheable by the browser - only one HTTP request for all icons in one symbol file - the icons can be styled using CSS, see note below (but manipulation of the SVG with JavaScript is NOT possible) See below for more information about SVG symbol files and how to generate them. #### Usage [](#usage) ``` ``` will output something like: ``` ``` #### Arguments [](#arguments) attributeDescriptionTypedefaultrequiredidentifiericon id in the symbols filestringyessymbolFilePreset identifier or path to file, also supports EXT: notationstringdefaultnobaseClassPrefix for the icon's class namesstringicon-defaultnorolerole for accessibilitystringgraphics-symbolnoariaLabelSets the aria-label on the svg tag for accessibilitystringnocacheBusterAdd a cache buster parameter to the symbolFile urlbooltruenopreloadPreload the symbols file by inserting a link rel="preload" tagboolfalsenoIn addition all universal tag attributes are supported: class, dir, id, lang, style, title, accesskey, tabindex and onclick Creating SVG symbols file and SCSS ---------------------------------- [](#creating-svg-symbols-file-and-scss) There are many ways to create the needed symbols file and there are plugins for webpack, gulp, grunt etc. One simple solution is to install the npm package [svg-sprite](https://github.com/svg-sprite/svg-sprite/)which we can use to create the symbol file from a set of svg icons and also generated an SCSS file which contains the icon dimensions. Create a svg-sprite.config.json for svg-sprite: ``` { "shape": { "id": { "separator": "" } }, "mode": { "symbol": { "dest": "target_path", "sprite": "sprite-default.svg", "prefix": ".icon-default-%s", "render": { "scss": { "dest": "target_path/_icon-default.scss" } } } } } ``` Then run svg-sprite while providing the path to your svg icons: ``` svg-sprite --config svg-sprite.config.json path/to/*.svg ``` If successful, this will generate - target\_path/\_icon-default.scss - the file with default dimensions for the icons - target\_path/sprite-default.svg - the symbol file containing all icons Notes ----- [](#notes) To be able to style the icons using CSS you need to prepare the single SVG files: Assuming you want to be able to style the stroke or fill color of an icon, replace its color value with 'currentValue' to make it use the parents color. See Changelog --------- [](#changelog) [CHANGELOG.md](CHANGELOG.md) ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community8 Small or concentrated contributor base Maturity50 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 ~215 days Total 2 Last Release 1152d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0f378a955aa90916ff6b28142799322bbb444649f2dc93923361ed50ac570cac?d=identicon)[soma](/maintainers/soma) --- Top Contributors [![mmunz](https://avatars.githubusercontent.com/u/3017481?v=4)](https://github.com/mmunz "mmunz (39 commits)") --- Tags svgtemplatingsymbolfluidViewHelpers ### Code Quality TestsPHPUnit Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/c1-c1-svg-viewhelpers/health.svg) ``` [![Health](https://phpackages.com/badges/c1-c1-svg-viewhelpers/health.svg)](https://phpackages.com/packages/c1-c1-svg-viewhelpers) ``` ### Alternatives [twig/twig Twig, the flexible, fast, and secure template language for PHP 8.4k443.2M5.8k](/packages/twig-twig)[mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 1954.1M49](/packages/fluidtypo3-vhs)[smarty/smarty Smarty - the compiling PHP template engine 2.3k39.1M395](/packages/smarty-smarty)[blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k34.2M309](/packages/blade-ui-kit-blade-icons)[laminas/laminas-view Fast and type safe HTML templating library with a flexible plugin system supporting multistep template composition 7526.3M230](/packages/laminas-laminas-view) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)