Merge pull request #9197 from ckeditor/i/9196-caption-icon

Feature (core): Created the universal caption icon. Closes #9196.

Docs (ckeditor5): Aligned the SVG icons section of the Development environment guide to the latest clean-up-svg-icons behavior (see #9196).

docs/framework/guides/contributing/development-environment.md

@@ -175,6 +175,5 @@ The script reduces the icon size up to 70%, depending on the software used to cr
 
 **Note**: You may still need to tweak the source code of the SVG files manually after using the script:
 
-* The icons should have the `viewBox` attribute (instead of `width` and `height`). The `removeDimensions` SVGO plugin will not remove `width` and `height` if there is no `viewBox` attribute so make sure it is present.
-* Sometimes SVGO leaves empty (transparent) groups `<g>...</g>`. They should be removed from the source.
+* Sometimes SVGO leaves empty (transparent) groups `<g>...</g>`. They should be removed from the source and running `clean-up-svg-icons` again usually does that.
 * Make sure the number of `<path>` elements is minimal. Merge paths whenever possible in the image processor before saving the file.

package.json

@@ -118,7 +118,7 @@
     "style-loader": "^1.2.1",
     "stylelint": "^13.5.0",
     "stylelint-config-ckeditor5": "^2.0.0",
-    "svgo": "^1.3.2",
+    "svgo": "^2.2.2",
     "terser-webpack-plugin": "^3.0.2",
     "tippy.js": "^6.2.7",
     "umberto": "^1.6.2",

packages/ckeditor5-core/src/index.js

@@ -25,6 +25,7 @@ export { default as secureSourceElement } from './editor/utils/securesourceeleme
 export { default as PendingActions } from './pendingactions';
 
 import cancel from './../theme/icons/cancel.svg';
+import caption from './../theme/icons/caption.svg';
 import check from './../theme/icons/check.svg';
 import eraser from './../theme/icons/eraser.svg';
 import lowVision from './../theme/icons/low-vision.svg';
@@ -51,6 +52,7 @@ import threeVerticalDots from './../theme/icons/three-vertical-dots.svg';
 
 export const icons = {
 	cancel,
+	caption,
 	check,
 	eraser,
 	lowVision,

scripts/clean-up-svg-icons.sh

@@ -22,6 +22,6 @@ do
 	then
 		echo "\x1B[33m[clean-up-svg-icons]\x1B[0m Note: \"$i\" is blacklisted, skipping."
 	else
-		svgo --config=./scripts/svgo.config.json -i $i
+		svgo --config=./scripts/svgo.config.js -i $i
 	fi
 done

scripts/svgo.config.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* eslint-env node */
+
+const { extendDefaultPlugins } = require( 'svgo' );
+
+module.exports = {
+	plugins: extendDefaultPlugins( [
+		{
+			name: 'removeViewBox',
+			active: false
+		},
+		{ name: 'collapseGroups' },
+		{ name: 'removeDimensions' },
+		{
+			name: 'removeAttrs',
+			params: {
+				attrs: '(fill|stroke|fill-rule)'
+			}
+		},
+		{
+			name: 'convertPathData',
+			params: {
+				noSpaceAfterFlags: false
+			}
+		},
+		{ name: 'removeTitle' },
+		{ name: 'removeComments' },
+		{ name: 'removeMetadata' }
+	] )
+};