Use in own extensions

You can also use Iconpack in your own extensions and add the wizard to your own database fields as well as the RTE.

Native Fields

The wizard for adding icons can be used arbitrarily in own database fields. To do this, simply assign the value IconpackWizard to the renderType of the corresponding field.

Here is an example with /Configuration/TCA/Overrides/tt_content.php:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
   'tt_content', [
      'my_custom_field' => [
         'label' => 'My Label',
         'config' => [
            'type' => 'user',
            'renderType' => 'IconpackWizard'
         ]
      ]
   ]
);
Copied!

RTE Fields

If you want to use Iconpack in your own RTE fields, the configuration is done automatically in the TypoScript setup, where lib.parseFunc_RTE.nonTypoTagUserFunc performs the transformation of the icons.

If this is not desired or possible, the content can optionally be preprocessed in the field via a DataProcessor.

Use the following TypoScript to add the DataProcessor to your own RTE field:

# Set templates and dataProcessing
lib.contentElement {
   dataProcessing {
      # This is required to render icons in RTE fields!
      # The output is controlled exclusively by the DataProcessor and then cleaned up by the Sanitizer.
      [number] = Quellenform\Iconpack\DataProcessing\IconpackProcessor
      [number] {
         fieldName = myCustomRteField
         fieldType = rte
      }
   }
}
Copied!

Fluid Template

Icons can be inserted directly from a fluid template using the provided ViewHelper. All that needs to be done is to add the namespace http://typo3.org/ns/Quellenform/Iconpack/ViewHelpers and a corresponding iconfig string. Optionally additionalAttributes, preferredRenderTypes and style can be used.

<html xmlns:i="http://typo3.org/ns/Quellenform/Iconpack/ViewHelpers" data-namespace-typo3-fluid="true">
   <i:icon iconfig="{headerIcon}" preferredRenderTypes="svgInline,webfont" />
</html>
Copied!

You can also call up a specific icon directly from Fluid:

<i:icon iconfig="fa6:brands,youtube" additionalAttributes="{class:'social'}" />
Copied!