README

Iconpack

TYPO3 CMS Extension iconpack

The most flexible icon system for TYPO3 10, 11, 12 and 13+!

This extension provides an iconpack registry for custom iconpacks which can be used in backend and frontend and are rendered according to the configuration of the installed iconpacks.

The idea behind the extension is to provide a flexible system by means of which any icon sets can be used and the desired output can be generated at any time by separating storage and rendering.

Features

The extension iconpack is different from previous implementations and will probably be the only icon extension you will need in the future.

The biggest differences are among others:

• Not limited to a specific iconset! Existing iconpacks can be installed, or custom iconpacks can be created, depending on your requirements
• Easy to use: Install, add the provided TypoScript-template & use it, no further configuration needed (but possible!)
• Offers the use of various icons in the header, page, in the bodytext (CKEditor 4/5) and in your own fields
• All required assets (JavaScripts, StyleSheets, etc.) are automatically added in frontend and backend by default, depending on the configuration of the icon set used
• All settings of an iconpack can be overridden via an individual configuration (YAML)
• Individual iconsets can be easily added (see instructions for creating your own iconpack provider)
• Aliasing/mapping of deprecated icons or entire iconpacks
• Can also be integrated into own extensions via the provided form wizard
• Multilingual labels for icons
• Uses the backend caching integrated in TYPO3 for the configuration of the installed iconpacks in order not to slow down the system
• The frontend rendering of icons can be changed afterwards (easily switch from Webfont to SVG with TypoScript)
• Works with Bootstrap Package and other extensions
• No dependency on other extensions or third-party code!

Planned Features

• Add contextmenu in CKEditor to edit a previously added icon (and options)
• Optimize the UI/Modal
• Add more detailed information on using and creating your own iconpacks

Sponsoring required

How does it work?

Instead of storing the entire HTML markup or a static file path for an icon in the database fields, a short configuration string is stored instead (also in the RTE). This string is called "iconfig" and looks something like fa6:solid,star,transform:spin. This example will render the icon Star from the iconpack Font Awesome 6 (solid style) with the additional property of a spinning rotation.

This string is only converted into HTML code according to the configuration during rendering in the backend or frontend, which ensures the greatest possible flexibility. It is possible to choose whether the icons are to be rendered as a webfont, sprites, inline SVG or as an SVG image without having to change the content in the database.

To illustrate this behavior better, here is an example.

Only the following code is always (!) stored in the database (RTE):

<span data-iconfig="fa6:solid,star"></span>

How this code is then displayed in the backend and frontend depends on the configured renderTypes and the icons provided by the respective iconpack. In the case of Font Awesome 6, for example, all possible types are provided:

• Webfont
• SVG sprites
• SVG images

The following possibilities are therefore available as renderTypes, which are displayed in BE/FE as follows:

svgInline

<svg viewBox="0 0 576 512" class="iconpack fas fa-star" fill="currentColor" aria-hidden="true">
	<path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path>
</svg>

svgSprite

<svg class="iconpack fas fa-star" fill="currentColor" viewBox="0 0 576 512" aria-hidden="true">
	<use href="/_assets/IDENTIFIER/Vendor/fontawesome-free-6.7.2-web/sprites/solid.svg#star"></use>
</svg>

webfont

<span class="iconpack fas fa-star" aria-hidden="true"></span>

svg

<img class="iconpack fas fa-star" src="/_assets/IDENTIFIER/Vendor/fontawesome-free-6.7.2-web/svgs/solid/star.svg" loading="lazy" aria-hidden="true" alt="">

The converters included in this extension ensure that only the most necessary code is stored in the database, and the output in BE/FE always corresponds to the configuration and requirements.

Furthermore, this extension adds additional icon fields for pages and text headers, but it can also be used to extend fields of your own extensions.

Note: This extension does NOT have the same approach as the TYPO3 integrated IconRegistry with its approach to cache all icons including their HTML markup for the backend and consider them as absolute, but focuses on dynamically handling icons for editors and frontend output!

Installation

1. Install this extension from TER or with Composer
2. Install one of the existing iconpack providers:
   • Bootstrap
   • Boxicons
   • Dripicons
   • Elegant Icons
   • Feather Icons
   • Flag Icons
   • Font Awesome
   • Helium Icons
   • Iconoir Icon
   • Ikons vector icons
   • Ionicons
   • Linea Icons
   • Linearicons
   • Lineicons
   • Material Icons
   • Octicons
   • Tabler Icons
   • Themify Icons
   • TYPO3 Icons
   • ...or create your own iconpack provider
3. Add the provided TypoScript to your template
4. [Optional] Install the Iconpack for Bootstrap Package extension if you want to use iconpacks in conjunction with Bootstrap Package.

Configuration

You can find a detailed description of the extension here: Iconpack Documentation

Contribute | Say Thanks!

• If you like this extension, use it.
• If you think you can do something better, be so kind and contribute your part to it
• If you love the extension or if you want to support further development, donate an amount of your choice

Credits

I would like to thank everyone who contributed in any way to the creation of this extension, but especially:

• easyTherm Infrarotheizung
• Benjamin Mack
• Werner Groß
• Kurt Dirnbauer
• All contributors