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)
• 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 backend
• 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

• Enable the use of SVG sprites in CKEditor 5
• 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 web font, sprites, inline SVG or as an SVG image without having to change the content in the database.

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 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
   • Font Awesome
   • Helium Icons
   • Ikons vector icons
   • Ionicons
   • Linea Icons
   • Linearicons
   • Lineicons
   • Material Icons (WIP)
   • Octicons
   • Themify 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