Breaking: Project icons are replaced and follow the colour scheme 

Description 

The four category type icons of this extension, which EXT:category_types registers as category_types.projects.* , were registered with the core provider \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider . It renders the default markup - the markup a sys_category type icon reaches - as an <img> tag. An image is opaque to CSS, so the icon kept the ink of its file whatever the backend colour scheme said.

The four category types now ask for inlining with inlineIcon: true in Configuration/CategoryTypes.yaml, so EXT:category_types registers them with \FGTCLB\AcademicBase\Imaging\IconProvider\CurrentColorSvgIconProvider , which inlines the file in both markups. A category type without that flag keeps the core provider.

The academic project page type (doktype 30) and the two content elements "Projects" and "Projects (selected)" used the core icon actions-code-merge , a merge glyph that says nothing about a project and that the extension does not ship. They now have icons of their own, registered in the new Configuration/Icons.php of this extension.

Every icon of the extension is a Font Awesome Free solid drawing in currentColor. The category types that mean the same thing as one of EXT:academic_base , the cooperation and the department, draw the shared file of EXT:academic_base .

2.x identifier 3.0 identifier Registry
actions-code-merge (core), page type 30: doktype select item and $GLOBALS['TCA']['pages']['ctrl']['typeicon_classes'][30] tx-academicprojects-doktype-project Backend, Configuration/Icons.php
actions-code-merge (core), content elements academicprojects_projectlist and academicprojects_projectlistsingle: CType select item, typeicon_classes and new content element wizard tx-academicprojects-plugin-projects Backend, Configuration/Icons.php
category_types.projects.<type> unchanged Backend and frontend, registered by EXT:category_types from Configuration/CategoryTypes.yaml

actions-code-merge stays registered by TYPO3, only this extension does not use it any more.

The category type identifiers are unchanged, the files they are registered from moved. The old files are deleted:

Category type Before (EXT:academic_projects/Resources/Public/Icons/) After
competence_field CategoryTypes/CompetenceField.svg EXT:academic_projects/Resources/Public/Icons/category-type/competence-field.svg
cooperation CategoryTypes/Cooperation.svg EXT:academic_base/Resources/Public/Icons/info/partnership.svg
funding_partner CategoryTypes/FundingPartner.svg EXT:academic_projects/Resources/Public/Icons/category-type/funding-partner.svg
project_department, department before 3.0, see Breaking: The projects department type is renamed CategoryTypes/Department.svg EXT:academic_base/Resources/Public/Icons/info/department.svg
Group projects, category_types_group.projects CategoryGroups/Projects.svg EXT:academic_projects/Resources/Public/Icons/category-group/projects.svg

Resources/Public/Icons/Extension.svg stays the icon of the extension. The licence of the Font Awesome files is listed in Resources/Public/Icons/LICENSE-font-awesome.txt, see Third-party icons.

Impact 

The four category type icons reach the frontend, through the icon ViewHelper of academic_base, <ab:icon identifier="category_types.projects.{type}" /> , in Partials/Project/Page/Categories.html and Partials/Project/Item.html. category_types registers them in the frontend icon registry as well, with the same provider, see Important: Category type icons come from the frontend icon registry. Neither call asks for the inline markup, so their rendered markup changes: an <img> of a fixed pixel size becomes an inlined <svg> with width="1em" height="1em" , which follows the font size and the colour of the text around it. Every site using the project plugins sees those icons resize, recolour and change their drawing.

Site CSS or JavaScript that sized, coloured or addressed the <img> has to address the <svg> instead.

In the backend, the category type icons take the text colour around them, so they stay legible in a dark backend colour scheme. The page tree, the page module, the record list, the page type and content element type selects and the new content element wizard show the new icons for project pages and project content elements.

Site CSS or JavaScript that addressed the project page type or the project content elements through .icon-actions-code-merge or data-identifier="actions-code-merge" no longer matches. A site package that refers to one of the deleted files, from its own Configuration/CategoryTypes.yaml, a template, TypoScript or CSS, points at nothing.

Affected Installations 

Every installation of this extension. Installations that render the project plugins in the frontend are affected visibly, and so are installations with own styling for the icons above or with references to the deleted files under EXT:academic_projects/Resources/Public/Icons/CategoryTypes/.

Migration 

Replace an image selector with an element selector in the site CSS, for example

/* before */
.project-categories .icon img { width: 32px; }

/* after */
.project-categories .icon svg { width: 1.25em; }
Copied!

The icon element keeps the surrounding <span class="t3js-icon icon" data-identifier="…"> wrapper, so a selector written against the wrapper needs no change.

Replace .icon-actions-code-merge and data-identifier="actions-code-merge" with the 3.0 identifier from the first table, and a reference to a deleted file with its replacement from the second one.

To keep a different icon:

  • For the page type or the content elements, register it under the 3.0 identifier in the Configuration/Icons.php of a site package that depends on this extension. They are backend icons, the frontend icon registry does not know them.
  • For a category type, in both registries, declare the type again with another icon in the Configuration/CategoryTypes.yaml of a site package, see the developer documentation of EXT:category_types , section Changing only the icon.
  • For a category type, in the frontend only, register its identifier, for example category_types.projects.competence_field , in the Configuration/FrontendIcons.php of a site package.