TYPO3 Icon Picker

Icon selection for TCA and RTE. Generates a browsable gallery of your icon fonts and SVGs - just link your stylesheet or image directory. Works with FontAwesome, Bootstrap, Icomoon.. Optionally adds icon field to pages, tt_content and sys_category.

Backend form with Icon Picker element
RTE with Icon Picker element

Features

  • Icon Picker TCA form element

  • Icon field for tt_content, pages and sys_category

  • RTE plugin

  • Icon gallery with filter function

  • Displays icons from image files and font (css)

  • Works with remote css files

  • Extracts and caches font styles (css)

  • Can include generated stylesheet in the frontend

Tip

Use your Icomoon development file. Your Icon Picker is always up to date, and you can serve the font files from your own remote without manually downloading and adjusting paths!

Demo

Video preview

Installation

  1. Install via composer

    composer require blueways/bw-icons
    

    Or install via Extension Manager, in this case you can skip step 2.

  2. Update database schema

    Make sure the extension is enabled in the Extension Manager. Do a database schema compare and update to add a new field in tt_content and pages table.

  3. Include PageTS

    Include the static PageTS for TYPO3 core icons or set up your own icons. See Configuration Configuration section.

  4. Enable icons for tt_content, pages and/or sys_category

    In the extension settings (Admin ToolsExtension Configurationbw_icons), you can enable the icon fields. If you want to use it for other tables, see For developers section.

  5. Include RTE configuration (optional)

    imports:
       - { resource: EXT:bw_icons/Configuration/RTE/IconPicker.yaml }
    
    editor:
       config:
         toolbar:
           - { name: 'icon', items: [IconPicker] }
    

Configuration

The displayed icons are set up via PageTS. Choose a unique identifier and select FileIconProvider if you want to add image files from a directory or CssIconProvider if you want to display font icons from a stylesheet.

mod.tx_bwicons {

        # Get icons from directory and subdirectory. Subdirectories become sidebar links.
        typo3icons = Blueways\BwIcons\Provider\FileIconProvider
        typo3icons {
                title = TYPO3 Icons
                folder = EXT:core/Resources/Public/Icons/T3Icons/svgs
        }

        # Get icons from stylesheet. Multiple font-faces in one file become sidebar links.
        fontawesome = Blueways\BwIcons\Provider\CssIconProvider
        fontawesome {
                title = FontAwsome
                file = fileadmin/fontawesome/css/all.css
        }

        # Get icons from remote stylesheet. Styles and font files are cached in /typo3temp
        icomoon = Blueways\BwIcons\Provider\CssIconProvider
        icomoon {
                title = Icomoon
                file = https://i.icomoon.io/public/b23ec64zea/Project/style.css
        }
}

Note

After changing the settings, make sure to clear the cache.

Usage

The icons are saved as filename (e.g. EXT:myext/Resources/Public/Images/icon.svg or fileadmin/icons/foo.png) if you use the FileIconProvider or as css class names (e.g. fas fa-arrow-right) by using CssIconProvider.

If you have configured only the selection of SVGs, you can safely use the <f:image src="data.tx_bwicons_icon" /> viewHelper in your fluid template.

By only using font icons, you can output like <i class="data.tx_bwicons_icon"></i>.

If you have a mixture, you can use my ViewHelper that determines the type by checking for a dot in the icon name:

{namespace bw=Blueways\BwIcons\ViewHelpers}

<bw:icon icon="{data.tx_bwicons_icon}" /> Hello world!

Output:

<i class="fa fas-wave"></i> Hello world!

or

<img src="/fileadmin/icons/foo.svg" /> Hello world!

Frontend Include (optional)

If you want to include the extracted styles in the frontend, you can use the CssUtility to generate the style-tags in the head of your page. Include this in your TypoScript setup:

page.headerData {
   123 = USER
   123.userFunc = Blueways\BwIcons\Utility\CssUtility->includeStyleSheets
}

For developers

Usage in other tables

  1. Create database field for the icon:

    create table tx_myext_domain_model_foo (
       icon_field varchar(255) not null default '',
    );
    
  2. Adjust TCA

    Add the renderType iconSelection in the config array:

    'icon_field' => [
       'label' => 'My Icon',
       'config' => [
          'type' => 'input',
          'renderType' => 'iconSelection'
       ]
    ],
    

New icon sources

If you want to add other icon sources (e.g. from API), you can create your own IconProvider. Just make sure to extend from BluewaysBwIconsProviderAbstractIconProvider.

Help & Contribution

This extension was made by Maik Schneider from blueways. Use the issue tracker for bugs and feature requests. If you have any questions, you can hit me up at the TYPO3 Slack.

Feel free to contribute!