PHPackages                             oliverthiele/ot-icons - 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. oliverthiele/ot-icons

ActiveTypo3-cms-extension[Templating & Views](/categories/templating)

oliverthiele/ot-icons
=====================

Icon ViewHelper - ViewHelper for rendering icons in your FluidTemplates. The output can be changed from one icon set to another at a later date.

v2.1.0(1w ago)01982GPL-2.0-or-laterPHPPHP >=8.3

Since Oct 20Pushed 1mo agoCompare

[ Source](https://github.com/oliverthiele/ot-icons)[ Packagist](https://packagist.org/packages/oliverthiele/ot-icons)[ Docs](https://www.oliver-thiele.de)[ RSS](/packages/oliverthiele-ot-icons/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (6)Versions (6)Used By (2)

OT Icons — Accessible SVG Icon ViewHelper for TYPO3
===================================================

[](#ot-icons--accessible-svg-icon-viewhelper-for-typo3)

ViewHelper for rendering accessible inline SVG icons in Fluid templates for TYPO3 v13 and v14. Icons are resolved via mapping files — switch icon sets without touching templates.

[![TYPO3](https://camo.githubusercontent.com/b53bdca9ce384fc877701998f476e5f2dbf33c5e3563e6f8bd197b46a3160f35/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332e3425323025374325323031342e332d6f72616e67652e737667)](https://typo3.org/)[![Packagist Version](https://camo.githubusercontent.com/8ba6b0b7497af7febb45002c68b92c727b60e16743f9bc229f25b4a520610437/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6c69766572746869656c652f6f742d69636f6e732e737667)](https://packagist.org/packages/oliverthiele/ot-icons)[![PHP](https://camo.githubusercontent.com/588b3a0a28da300bc6b92476c34535121eeab7673136c6ebe5be724846ef7fd6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f6f6c69766572746869656c652f6f742d69636f6e732f7068702e737667)](https://php.net/)[![License](https://camo.githubusercontent.com/1033e41104f4ee58b950b997794ee6c6d12ab33e53ac9ff44b8b3b85396b9094/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f6c69766572746869656c652f6f742d69636f6e732e737667)](LICENSE)[![Changelog](https://camo.githubusercontent.com/6bc02a7bc61afc1cb3faaa53420df6d904b9940d7f3e2e11a463e1fdbb3cd52d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4368616e67656c6f672d4348414e47454c4f472e6d642d626c75652e737667)](CHANGELOG.md)

---

Features
--------

[](#features)

- **Mapping-based icon resolution** — update or change icon sets (e.g., Font Awesome → Material Icons) without modifying templates
- **Fully accessible SVG output** — automatic handling of `role`, `aria-hidden`, `aria-label`, and `` / `` tags
- **Multiple output modes** — inline SVG, sprite-based, or Base64 (planned)
- **Default styles per icon set** — each mapping file defines its default subdirectory (e.g., `solid/`)
- **Cache-optimized** — internal request cache plus TYPO3 caching with version-aware keys

---

Requirements
------------

[](#requirements)

RequirementVersionTYPO3`^13.4 | ^14.3`PHP`>=8.3`---

Installation
------------

[](#installation)

```
composer require oliverthiele/ot-icons
```

The global Fluid namespace `i:` is automatically registered when the extension is loaded. No manual namespace registration required.

---

Configuration
-------------

[](#configuration)

Register the icon directory in your site configuration (`config/sites/{site}/config.yaml`):

```
settings:
    otIcons:
        defaultIconSet: 'FontAwesome_7'
        defaultIconStyle: 'solid'
        iconDirectory: 'EXT:ot_febuild/Resources/Public/Assets/Website/SVG/'
        customMappingDirectory: 'EXT:my_sitepackage/Configuration/Mappings/'
```

SettingDescription`defaultIconSet`Mapping file to use (e.g. `FontAwesome_7`)`defaultIconStyle`Fallback style for icons without explicit style`iconDirectory`Path (using `EXT:`) to your compiled SVG files`customMappingDirectory`Optional directory for custom mapping overrides### Build system integration (e.g. Webpack)

[](#build-system-integration-eg-webpack)

Copy SVG files from your icon library into the public asset directory:

```
new CopyWebpackPlugin({
  patterns: [
    {
      from: './node_modules/@fortawesome/fontawesome-pro/svgs',
      to: 'Website/SVG'
    },
  ],
})
```

---

Usage in Fluid
--------------

[](#usage-in-fluid)

```

```

```
download
```

### Available attributes

[](#available-attributes)

AttributeTypeDescription`identifier`stringInternal icon key (mapped to file name)`size`stringIcon size (`xs`, `sm`, `lg`, `1x`–`10x`)`iconStyle`stringStyle alias (`s`, `r`, `b`, `l`, etc.)`returnAs`stringOutput type (`inline`, `sprite`, `base64`) — currently only inline`id`stringOptional HTML `id` attribute`additionalClasses`stringExtra CSS classes`aria-hidden`boolHides the icon from screen readers`aria-label`stringText alternative (rendered inside ``)`aria-description`stringAdditional descriptive text`role`stringAccessibility role (`img`, `presentation`, `none`, etc.)`title`stringTooltip text---

Custom mapping overrides
------------------------

[](#custom-mapping-overrides)

Create a file at `EXT:my_sitepackage/Configuration/Mappings/{IconSetName}.php`with only the identifiers that differ:

```