quellenform / t3x-iconpack

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.

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

t3x-iconpack's Issues

icons size settings?

where can i set the icons size as seen in the documentation?
i have no such settings:

best regards

[HTML Quality] in svg tags remove title attribute

Title attribute is not allowed on svg elements.

Option to remove default CSS

Would it be possible to add an option to disable the EXT:iconpack/Resources/Public/Css/Iconpack.min.css?
With the currently used method $pageRenderer->addCssFile(); it's not possible to remove it.

Another way would be using the asset collector class instead. Then it would be possible to use the removeStyleSheet() function.

Icon viewhelper does not work like expected

I installed the following Extensions under TYPO3 12:

• bootstrap_package
• iconpack
• bootstrap_package_iconpack
• iconpack_bootstrap

Now i try to use the icon viewhelper inside a template (news) to get a calendar icon of bootstrap:

<html data-namespace-typo3-fluid="true" xmlns:core="TYPO3\CMS\Core\ViewHelpers"
      xmlns:i="http://typo3.org/ns/Quellenform/Iconpack/ViewHelpers"
      xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<i:icon iconfig="bi1:calendar3" preferredRenderTypes="webfont" />
</html>

No output is generated.

Also tried different variations:

<i:icon iconfig="bi1" additionalAttributes="{class:'calendar3'}" preferredRenderTypes="webfont" />
<i:icon iconfig="bi1:calendar3" additionalAttributes="{class:'calendar3'}" preferredRenderTypes="svgInline,webfont" />

Documentation source: https://docs.typo3.org/p/quellenform/t3x-iconpack/1.1/en-us/Tutorials/Usage.html

I would like to add this icon:
https://icons.getbootstrap.com/icons/calendar3/

Compatibility with TYPO3 v12 - JavaScript Modal

As of TYPO3 v12 the following has changed regarding this task:

• The Modal API has been changed (see here: Breaking: #98288 - Updated Backend Modal API)
• The rendering of the content for the modal, which receives data via AJAX, has been changed (further details not yet known)

The changes for calling the modal seem to be rather smaller.

As for the second point, one would have to take a closer look at the AJAX request and the rendering.

Currently the TYPO3 log shows the following error message:

[CRITICAL] request="4c1941f825300" component="TYPO3.CMS.Core.Error.ProductionExceptionHandler": Core: Exception handler (WEB: BE): RuntimeException, code #1663617170, file /vendor/typo3/cms-fluid/Classes/ViewHelpers/Form/AbstractFormFieldViewHelper.php, line 96: Form ViewHelpers are Extbase specific and need an Extbase Request to work
{
    "mode":"WEB",
    "application_mode":"BE",
    "exception_class":"RuntimeException",
    "exception_code":1663617170,
    "file":"/vendor/typo3/cms-fluid/Classes/ViewHelpers/Form/AbstractFormFieldViewHelper.php",
    "line":96,
    "message":"Form ViewHelpers are Extbase specific and need an Extbase Request to work",
    "request_url":"https://www.test.com/typo3/ajax/iconpack/modal?token=--AnonymizedToken--&fieldType=native&iconfig=fa6:solid,eye...",
    "exception":null
}

The corresponding place in the code is this one.

Any help on this topic is greatly appreciated!

After Cache clearing: Button LinkButton is not valid

Hi there,

we have the backend running on German language on TYPO3 11.5.28 with the current TER relelase of iconpack.

Every time we cleared the Cache and then tried to edit a page or content element, we got an Exception when the core tried to add a button to the Toolbar. It is not valid, because the title was missing. After some core debugging, we figured that iconpack is killing the (working!) core language service in this situation.

Please consider changing IconpackProvider::getTranslatedLabel to this:

protected function getTranslatedLabel(string $label, ?string $default = ''): string
{
//$GLOBALS['LANG'] = GeneralUtility::makeInstance(LanguageService::class);
return !empty($label) ? $GLOBALS['LANG']->sL($label) : $default;
}

Not sure why you are making a new instance? It's already there :-)

Greetings,
Manuel

Issue/request: icon in link

Hello,
THX for the great extension!
I would like to have the ability to use icons in links.
If I now link a text that contains an icon, the following happens:
<a href="t3://page?uid=1">Sed cursus turpis </a><span class="fa-solid fa-arrow-down-to-square" data-iconfig="fa6p:solid,arrow-down-to-square"></span><a href="t3://page?uid=1">vitae tortor</a>
Of course, it would be desirable for the icon to be included within the a-tag.
Even if it is not particularly user-friendly, I would also appreciate the ability to link an icon by itself.

Opening modalbox in IRRE content elements

When a content is placed in a IRRE such as in ext:news, the modalbox that allow the selection of the icon is not opening
I do not identifies any javascript error not network request error.

TYPO3 version : 11.5.26
IconPack version : 0.2.1

iconpack Configuration is null

if u disable the autoConfigRte feature, you will get a array_merge_recursive(): Argument #2 must be of type array, null given
Exception because, $iconPackConfiguration i overwritten every time, even if the feature is disable.

Solution: Just put the line 60 one line up, so it's in the if condition and the empty array will be present if the feature is disabled.

t3x-iconpack/Classes/EventListener/IconpackPrepareConfigurationForEditor.php

Line 60 in 99a1a60

$iconpackConfiguration = $yaml['editor']['config'];

TYPO3 12.4.16 Fluid Integration not working

He,

i updated some TYPO3 from 12.4.15 to 124.16.
Since the Update alle icons added via Fluid are gone.

In 12.4.15 all was fine.

<html data-namespace-typo3-fluid="true"
      xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:i="http://typo3.org/ns/Quellenform/Iconpack/ViewHelpers"
      xmlns:dp="http://typo3.org/ns/DirkPersky/Theme/ViewHelpers"
>
....
<i:icon iconfig="fa6:brands,linkedin" />
....
</html>

Compatibility with TYPO3 v12 - RTE Transform

Note: Basically, the output of icons previously stored in RTE fields in the database in v11 works, but...

As of TYPO3 v12 the following has changed regarding this task:

• The hook in TYPO3\CMS\Core\Html\RteHtmlParser responsible for converting the icons into an iconfig string from database to RTE and vice versa has been removed (see here: Deprecation: #92992 - Hook t3lib_parsehtml_proc.php:transformation).

This means that it is no longer possible to load and save icons in v12 in the RTE.
It therefore needs two modifications to enable the transformation of the icons when editing and saving in the backend:

1. An alternative to transformRte is needed to transform the iconfig string of the icons into a valid HTML markup when loading from the database, and to display the icons in the RTE.
2. An alternative to transformDb is needed to transform the HTML markup from the RTE into an iconfig string for storage in the database.

The following transformation would have to be achieved (DB <> RTE)

Content to be stored in the database:

<p><icon data-iconfig="fa6:solid,eye"></icon></p>

Content to be displayed in the RTE:

<p><span class="fa-eye fas" data-iconfig="fa6:solid,eye" role="img"> </span></p>

The following classes/files are affected:

• ext_localconf.php
• Quellenform\Iconpack\Html\IconpackHtmlParser
• Quellenform\Iconpack\Html\IconpackRteTransformation

Any help on this topic is greatly appreciated!

Compatibility with TYPO3 v12 - CKEditor5 plugin

As of TYPO3 v12 the following has changed regarding this task:

• In TYPO3 v12, the CKEditor version 5 is used, which means that the JavaScript currently used in the backend does not work and adding icons is not possible (see here: Feature: #96874 - CKEditor 5)

Therefore, the current JavaScript must be adapted in such a way that it makes it possible again to add icons in the RTE via a CKEditor plugin.

Any help on this topic is greatly appreciated!

How to have the custom RTEs processed for icons ?

I've encountered a problem and don't know at the moment how to solve it.
If I input an icon in the bodytext of a tt_content the icon is properly displayed.
If I setup a rte in another type of content (in my case build with flux) the rte isn't processed in the same way.

I guess the problem is coming from the fact that the icons are processed in a dataprocessing of lib.contentElement instead of the lib.parseFunc_RTE
See the capture below first icon is set in a tt_content bodytext the other on in a custom content element.

any help would be welcome.

Undefined global variable $LANG

If the TYPO3 cache is cleared and immediately afterwards no page is called in the backend, but instead directly the frontend, the iconpack cache is not created and you get the following error message:

PHP Warning: Undefined global variable $LANG in iconpack/Classes/Domain/Model/IconpackProvider.php line 601

The problem is related to an error in the model where translated labels should be created and written to the cache.

iconpack CSS not loaded in news

I have installed the following extension "ICONPACK" for Typo3 version 12, the extension also works as desired with normal content elements.

I then installed the news (11.4.2) extension, the "insert ICON" is displayed in the editor, something is also inserted when I switch to the source code in the editor, as follows

<span class="fas fa-apple-whole" data-iconfig="fa6:solid,apple-whole"></span>

been inserted, but the ICON is not displayed in either the frontend or the backend. What else do I have to do to make it work in the NEWS?
Greetings Werner

Icons for sys_category

Cool extension, well done @stephankellermayr !

Surely easy to extend but would be cool to have the feature of adding icons to categories.

HiRes Icon for RTE is missing

In TYPO3-Backend there is a detection for 4K displays in JavaScript. But the 4K Icons aren't available in the extension.

The Icons Paths is changed via Javascript from
/typo3conf/ext/iconpack/Resources/Public/JavaScript/v11/CKEditor/icons/
to
/typo3conf/ext/iconpack/Resources/Public/JavaScript/v11/CKEditor/icons/hidpi

The Icon-Path hidpi isn't included in the extension. Please fix.
A current workarround is to include the following htaccess rule in your TYPO3 htaccess
RedirectMatch 301 /typo3conf/ext/iconpack/Resources/Public/JavaScript/v11/CKEditor/icons/hidpi/(.*) /typo3conf/ext/iconpack/Resources/Public/JavaScript/v11/CKEditor/icons//$1
But a long Termin solution is needed.