Skip to content

Commit 2d6ed64

Browse files
andreaskienastmaddy2101
andreaskienast
authored and
maddy2101
committed
[TASK] Use SVG icon sprites
This patch updates @typo3/icons to version 2.x delivering icon sprites. Using icon sprites greatly improves backend performance for several reasons: - A single sprite file contains multiple icons which need to be loaded once only - The DOM is reduced as it's not necessary to load SVG icons inline anymore to apply styling Todo for a later patch: - Replace aliases with "real" icon identifiers Resolves: #92689 Releases: master, 10.4 Change-Id: Ib3018c4e7f5471274e10c261438792b530c77cde Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66094 Tested-by: TYPO3com <noreply@typo3.com> Tested-by: Markus Klein <markus.klein@typo3.org> Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de> Reviewed-by: Markus Klein <markus.klein@typo3.org> Reviewed-by: Georg Ringer <georg.ringer@gmail.com> Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
1 parent ea98a1d commit 2d6ed64

File tree

966 files changed

+4431
-587
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

966 files changed

+4431
-587
lines changed

‎Build/Gruntfile.js‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -263,159 +263,157 @@ module.exports = function (grunt) {
263263
files: [{
264264
expand: true,
265265
cwd: '<%= paths.t3icons %>',
266-
src: ['**/*.svg', '!install/*', '!module/*'],
266+
src: ['**/*.svg', 'icons.json', '!install/*', '!module/*'],
267267
dest: '<%= paths.sysext %>core/Resources/Public/Icons/T3Icons/',
268-
ext: '.svg'
269268
}]
270269
},
271270
install_icons: {
272271
files: [
273272
{
274273
expand: true,
275-
cwd: '<%= paths.t3icons %>install/',
274+
cwd: '<%= paths.t3icons %>svgs/install/',
276275
src: ['**/*.svg'],
277276
dest: '<%= paths.sysext %>install/Resources/Public/Icons/modules/',
278-
ext: '.svg'
279277
}
280278
]
281279
},
282280
module_icons: {
283281
files: [
284282
{
285283
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-about.svg',
286-
src: '<%= paths.t3icons %>module/module-about.svg'
284+
src: '<%= paths.t3icons %>svgs/module/module-about.svg'
287285
},
288286
{
289287
dest: '<%= paths.sysext %>adminpanel/Resources/Public/Icons/module-adminpanel.svg',
290-
src: '<%= paths.t3icons %>module/module-adminpanel.svg'
288+
src: '<%= paths.t3icons %>svgs/module/module-adminpanel.svg'
291289
},
292290
{
293291
dest: '<%= paths.sysext %>belog/Resources/Public/Icons/module-belog.svg',
294-
src: '<%= paths.t3icons %>module/module-belog.svg'
292+
src: '<%= paths.t3icons %>svgs/module/module-belog.svg'
295293
},
296294
{
297295
dest: '<%= paths.sysext %>beuser/Resources/Public/Icons/module-beuser.svg',
298-
src: '<%= paths.t3icons %>module/module-beuser.svg'
296+
src: '<%= paths.t3icons %>svgs/module/module-beuser.svg'
299297
},
300298
{
301299
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-cshmanual.svg',
302-
src: '<%= paths.t3icons %>module/module-cshmanual.svg'
300+
src: '<%= paths.t3icons %>svgs/module/module-cshmanual.svg'
303301
},
304302
{
305303
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-page.svg',
306-
src: '<%= paths.t3icons %>module/module-page.svg'
304+
src: '<%= paths.t3icons %>svgs/module/module-page.svg'
307305
},
308306
{
309307
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-sites.svg',
310-
src: '<%= paths.t3icons %>module/module-sites.svg'
308+
src: '<%= paths.t3icons %>svgs/module/module-sites.svg'
311309
},
312310
{
313311
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-templates.svg',
314-
src: '<%= paths.t3icons %>module/module-templates.svg'
312+
src: '<%= paths.t3icons %>svgs/module/module-templates.svg'
315313
},
316314
{
317315
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-urls.svg',
318-
src: '<%= paths.t3icons %>module/module-urls.svg'
316+
src: '<%= paths.t3icons %>svgs/module/module-urls.svg'
319317
},
320318
{
321319
dest: '<%= paths.sysext %>backend/Resources/Public/Icons/module-contentelements.svg',
322-
src: '<%= paths.t3icons %>module/module-contentelements.svg'
320+
src: '<%= paths.t3icons %>svgs/module/module-contentelements.svg'
323321
},
324322
{
325323
dest: '<%= paths.sysext %>lowlevel/Resources/Public/Icons/module-config.svg',
326-
src: '<%= paths.t3icons %>module/module-config.svg'
324+
src: '<%= paths.t3icons %>svgs/module/module-config.svg'
327325
},
328326
{
329327
dest: '<%= paths.sysext %>lowlevel/Resources/Public/Icons/module-dbint.svg',
330-
src: '<%= paths.t3icons %>module/module-dbint.svg'
328+
src: '<%= paths.t3icons %>svgs/module/module-dbint.svg'
331329
},
332330
{
333331
dest: '<%= paths.sysext %>extensionmanager/Resources/Public/Icons/module-extensionmanager.svg',
334-
src: '<%= paths.t3icons %>module/module-extensionmanager.svg'
332+
src: '<%= paths.t3icons %>svgs/module/module-extensionmanager.svg'
335333
},
336334
{
337335
dest: '<%= paths.sysext %>filelist/Resources/Public/Icons/module-filelist.svg',
338-
src: '<%= paths.t3icons %>module/module-filelist.svg'
336+
src: '<%= paths.t3icons %>svgs/module/module-filelist.svg'
339337
},
340338
{
341339
dest: '<%= paths.sysext %>form/Resources/Public/Icons/module-form.svg',
342-
src: '<%= paths.t3icons %>module/module-form.svg'
340+
src: '<%= paths.t3icons %>svgs/module/module-form.svg'
343341
},
344342
{
345343
dest: '<%= paths.sysext %>indexed_search/Resources/Public/Icons/module-indexed_search.svg',
346-
src: '<%= paths.t3icons %>module/module-indexed_search.svg'
344+
src: '<%= paths.t3icons %>svgs/module/module-indexed_search.svg'
347345
},
348346
{
349347
dest: '<%= paths.sysext %>info/Resources/Public/Icons/module-info.svg',
350-
src: '<%= paths.t3icons %>module/module-info.svg'
348+
src: '<%= paths.t3icons %>svgs/module/module-info.svg'
351349
},
352350
{
353351
dest: '<%= paths.sysext %>install/Resources/Public/Icons/module-install.svg',
354-
src: '<%= paths.t3icons %>module/module-install.svg'
352+
src: '<%= paths.t3icons %>svgs/module/module-install.svg'
355353
},
356354
{
357355
dest: '<%= paths.sysext %>install/Resources/Public/Icons/module-install-environment.svg',
358-
src: '<%= paths.t3icons %>module/module-install-environment.svg'
356+
src: '<%= paths.t3icons %>svgs/module/module-install-environment.svg'
359357
},
360358
{
361359
dest: '<%= paths.sysext %>install/Resources/Public/Icons/module-install-maintenance.svg',
362-
src: '<%= paths.t3icons %>module/module-install-maintenance.svg'
360+
src: '<%= paths.t3icons %>svgs/module/module-install-maintenance.svg'
363361
},
364362
{
365363
dest: '<%= paths.sysext %>install/Resources/Public/Icons/module-install-settings.svg',
366-
src: '<%= paths.t3icons %>module/module-install-settings.svg'
364+
src: '<%= paths.t3icons %>svgs/module/module-install-settings.svg'
367365
},
368366
{
369367
dest: '<%= paths.sysext %>install/Resources/Public/Icons/module-install-upgrade.svg',
370-
src: '<%= paths.t3icons %>module/module-install-upgrade.svg'
368+
src: '<%= paths.t3icons %>svgs/module/module-install-upgrade.svg'
371369
},
372370
{
373371
dest: '<%= paths.sysext %>recordlist/Resources/Public/Icons/module-list.svg',
374-
src: '<%= paths.t3icons %>module/module-list.svg'
372+
src: '<%= paths.t3icons %>svgs/module/module-list.svg'
375373
},
376374
{
377375
dest: '<%= paths.sysext %>beuser/Resources/Public/Icons/module-permission.svg',
378-
src: '<%= paths.t3icons %>module/module-permission.svg'
376+
src: '<%= paths.t3icons %>svgs/module/module-permission.svg'
379377
},
380378
{
381379
dest: '<%= paths.sysext %>recycler/Resources/Public/Icons/module-recycler.svg',
382-
src: '<%= paths.t3icons %>module/module-recycler.svg'
380+
src: '<%= paths.t3icons %>svgs/module/module-recycler.svg'
383381
},
384382
{
385383
dest: '<%= paths.sysext %>reports/Resources/Public/Icons/module-reports.svg',
386-
src: '<%= paths.t3icons %>module/module-reports.svg'
384+
src: '<%= paths.t3icons %>svgs/module/module-reports.svg'
387385
},
388386
{
389387
dest: '<%= paths.sysext %>scheduler/Resources/Public/Icons/module-scheduler.svg',
390-
src: '<%= paths.t3icons %>module/module-scheduler.svg'
388+
src: '<%= paths.t3icons %>svgs/module/module-scheduler.svg'
391389
},
392390
{
393391
dest: '<%= paths.sysext %>setup/Resources/Public/Icons/module-setup.svg',
394-
src: '<%= paths.t3icons %>module/module-setup.svg'
392+
src: '<%= paths.t3icons %>svgs/module/module-setup.svg'
395393
},
396394
{
397395
dest: '<%= paths.sysext %>tstemplate/Resources/Public/Icons/module-tstemplate.svg',
398-
src: '<%= paths.t3icons %>module/module-tstemplate.svg'
396+
src: '<%= paths.t3icons %>svgs/module/module-tstemplate.svg'
399397
},
400398
{
401399
dest: '<%= paths.sysext %>viewpage/Resources/Public/Icons/module-viewpage.svg',
402-
src: '<%= paths.t3icons %>module/module-viewpage.svg'
400+
src: '<%= paths.t3icons %>svgs/module/module-viewpage.svg'
403401
},
404402
{
405403
dest: '<%= paths.sysext %>workspaces/Resources/Public/Icons/module-workspaces.svg',
406-
src: '<%= paths.t3icons %>module/module-workspaces.svg'
404+
src: '<%= paths.t3icons %>svgs/module/module-workspaces.svg'
407405
}
408406
]
409407
},
410408
extension_icons: {
411409
files: [
412410
{
413411
dest: '<%= paths.sysext %>form/Resources/Public/Icons/Extension.svg',
414-
src: '<%= paths.t3icons %>module/module-form.svg'
412+
src: '<%= paths.t3icons %>svgs/module/module-form.svg'
415413
},
416414
{
417415
dest: '<%= paths.sysext %>rte_ckeditor/Resources/Public/Icons/Extension.svg',
418-
src: '<%= paths.t3icons %>module/module-rte-ckeditor.svg'
416+
src: '<%= paths.t3icons %>svgs/module/module-rte-ckeditor.svg'
419417
}
420418
]
421419
},

‎Build/Sources/Sass/component/_dropdown.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,14 @@ div.dropdown-menu {
118118
.dropdown-table-icon {
119119
width: 16px;
120120
padding-right: 0.5em;
121+
122+
&-actions-system-cache-clear-impact-low {
123+
color: $state-success-text;
124+
}
125+
126+
&-actions-system-cache-clear-impact-high {
127+
color: $state-danger-text;
128+
}
121129
}
122130

123131
.dropdown-table-title {

‎Build/Sources/Sass/component/_icon.scss‎

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// Example Usage
88
// -------------
99
//
10-
// <span class="icon icon-size-large icon-provider-svg">
10+
// <span class="icon icon-size-large">
1111
// <span class="icon-markup">
1212
// <img src="#" width="16" height="16">
1313
// </span>
@@ -20,11 +20,12 @@
2020
//
2121
// Variables
2222
//
23-
$icon-size-small: 16px;
24-
$icon-size-default: 32px;
25-
$icon-size-large: 48px;
26-
$icon-unify-modifier: 0.86;
27-
$icon-opacity-disabled: 0.5;
23+
$icon-size-small: 16px !default;
24+
$icon-size-default: 32px !default;
25+
$icon-size-large: 48px !default;
26+
$icon-size-mega: 64px !default;
27+
$icon-unify-modifier: 0.86 !default;
28+
$icon-opacity-disabled: 0.5 !default;
2829

2930
//
3031
// Component
@@ -34,6 +35,8 @@ $icon-opacity-disabled: 0.5;
3435
display: inline-block;
3536
overflow: hidden;
3637
white-space: nowrap;
38+
height: 1em;
39+
width: 1em;
3740
vertical-align: -22%;
3841

3942
svg,
@@ -90,8 +93,8 @@ $icon-opacity-disabled: 0.5;
9093
}
9194

9295
100% {
93-
-webkit-transform: rotate(359deg);
94-
transform: rotate(359deg);
96+
-webkit-transform: rotate(360deg);
97+
transform: rotate(360deg);
9598
}
9699
}
97100

@@ -102,8 +105,8 @@ $icon-opacity-disabled: 0.5;
102105
}
103106

104107
100% {
105-
-webkit-transform: rotate(359deg);
106-
transform: rotate(359deg);
108+
-webkit-transform: rotate(360deg);
109+
transform: rotate(360deg);
107110
}
108111
}
109112

@@ -142,41 +145,4 @@ $icon-opacity-disabled: 0.5;
142145
@include icon-size(small, $icon-size-small);
143146
@include icon-size(default, $icon-size-default);
144147
@include icon-size(large, $icon-size-large);
145-
146-
//
147-
// Special icons
148-
//
149-
.icon-actions-edit-copy-release,
150-
.icon-actions-edit-cut-release,
151-
.icon-status-status-current,
152-
.icon-status-dialog-error,
153-
.icon-status-status-permission-denied {
154-
color: $brand-danger;
155-
}
156-
157-
.icon-status-status-sorting-light-asc,
158-
.icon-status-status-sorting-light-desc {
159-
color: #fff;
160-
}
161-
162-
.icon-status-status-sorting-asc,
163-
.icon-status-status-sorting-desc {
164-
color: $gray;
165-
}
166-
167-
.icon-status-dialog-information {
168-
color: $brand-info;
169-
}
170-
171-
.icon-status-dialog-ok,
172-
.icon-status-status-permission-granted {
173-
color: $brand-success;
174-
}
175-
176-
.icon-status-dialog-notification {
177-
color: $brand-notice;
178-
}
179-
180-
.icon-status-dialog-warning {
181-
color: $brand-warning;
182-
}
148+
@include icon-size(mega, $icon-size-mega);

‎Build/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
},
7272
"dependencies": {
7373
"@claviska/jquery-minicolors": "^2.3.5",
74-
"@typo3/icons": "^1.11.1",
74+
"@typo3/icons": "^2.0.1",
7575
"autosize": "^4.0.2",
7676
"broadcastchannel-polyfill": "^1.0.0",
7777
"chart.js": "^2.9.3",

‎Build/yarn.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -430,12 +430,12 @@
430430
"@typescript-eslint/types" "4.2.0"
431431
eslint-visitor-keys "^2.0.0"
432432

433-
"@typo3/icons@^1.11.1":
434-
version "1.11.1"
435-
resolved "https://registry.yarnpkg.com/@typo3/icons/-/icons-1.11.1.tgz#38aeaa798f50484b9a6c15c803391ede29dcd5ca"
436-
integrity sha512-3jxV+NXl1/yQuWpDbJ9296zj0M5kWbGllYHblHp6KQ/Ipt/l6YqWP9rzS5c0F0JzeLX0pJp07v88Oa1f8mt0gw==
433+
"@typo3/icons@^2.0.1":
434+
version "2.0.1"
435+
resolved "https://registry.yarnpkg.com/@typo3/icons/-/icons-2.0.1.tgz#f13c5bc8a87d505e9da2dcdda5cbee61890665d4"
436+
integrity sha512-HOYUfjXV1n3Qi043nGdGeaAR4YUbL4F2wQ+SvTbcaJ/KFHf11oZNEPGiVt1zlFl5yVhvfEedeMKz74LjGGtM0Q==
437437
dependencies:
438-
npm "^6.13.4"
438+
npm "^6.14.5"
439439

440440
"@yarnpkg/lockfile@^1.1.0":
441441
version "1.1.0"
@@ -6227,7 +6227,7 @@ npm-user-validate@~1.0.0:
62276227
resolved "https://registry.yarnpkg.com/npm-user-validate/-/npm-user-validate-1.0.0.tgz#8ceca0f5cea04d4e93519ef72d0557a75122e951"
62286228
integrity sha1-jOyg9c6gTU6TUZ73LQVXp1Ei6VE=
62296229

6230-
npm@^6.13.4:
6230+
npm@^6.14.5:
62316231
version "6.14.8"
62326232
resolved "https://registry.yarnpkg.com/npm/-/npm-6.14.8.tgz#64ef754345639bc035982ec3f609353c8539033c"
62336233
integrity sha512-HBZVBMYs5blsj94GTeQZel7s9odVuuSUHy1+AlZh7rPVux1os2ashvEGLy/STNK7vUjbrCg5Kq9/GXisJgdf6A==

‎typo3/sysext/adminpanel/Resources/Public/Css/adminpanel.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎typo3/sysext/adminpanel/Resources/Public/Icons/module-adminpanel.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎typo3/sysext/backend/Classes/Backend/Avatar/Avatar.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ public function getImgTag(array $backendUser = null, $size = 32)
9898
if (!$avatarImage) {
9999
$avatarImage = GeneralUtility::makeInstance(
100100
Image::class,
101-
PathUtility::stripPathSitePrefix(GeneralUtility::getFileAbsFileName('EXT:core/Resources/Public/Icons/T3Icons/avatar/avatar-default.svg')),
101+
PathUtility::stripPathSitePrefix(GeneralUtility::getFileAbsFileName('EXT:core/Resources/Public/Icons/T3Icons/svgs/avatar/avatar-default.svg')),
102102
$size,
103103
$size
104104
);

‎typo3/sysext/backend/Classes/ViewHelpers/AvatarViewHelper.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
*
4040
* <span class="avatar">
4141
* <span class="avatar-image">
42-
* <img src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/avatar/avatar-default.svg" width="32" height="32" />
42+
* <img src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/avatar/svgs/avatar-default.svg" width="32" height="32" />
4343
* </span>
4444
* </span>
4545
*

‎typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/ClearCacheToolbarItemDropDown.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h3 class="dropdown-headline">
77
<f:for each="{cacheActions}" as="cacheAction">
88
<div class="dropdown-table-row">
99
<a href="{cacheAction.href}" class="toolbar-cache-flush-action">
10-
<div class="dropdown-table-column dropdown-table-column-top dropdown-table-icon">
10+
<div class="dropdown-table-column dropdown-table-column-top dropdown-table-icon dropdown-table-icon-{cacheAction.iconIdentifier}">
1111
<core:icon identifier="{cacheAction.iconIdentifier}" size="small" />
1212
</div>
1313
<div class="dropdown-table-column dropdown-table-column-top dropdown-table-text">

0 commit comments

Comments
 (0)