t/ckeditor5-theme-lark/206: Created an npm task that cleans up SVG icons. Updated docs.

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

@@ -242,12 +242,22 @@ Leads to [`ckeditor/ckeditor5-image@02869eb`](https://github.com/ckeditor/ckedit
 
 By default, CKEditor 5 supports SVG icons found in the `ckeditor5-*/theme/icons` folders. Unfortunately, most of the SVG editing software produces the output with comments, obsolete tags, and complex paths, which bloats the DOM and makes the builds heavy for no good reason.
 
-To remove the excess data and prevent [certain issues](https://github.com/ckeditor/ckeditor5-ui/issues/245), **all new icons should be optimized before joining the code base**. The right utility to do this is Node–based [SVGO](https://github.com/svg/svgo) and the usage is as simple as:
+To remove the excess data and prevent [certain issues](https://github.com/ckeditor/ckeditor5-ui/issues/245), **all new icons should be optimized before joining the code base**. To do that, you can use the `clean-up-svg-icons` script in the [root of the project](#setting-up-the-ckeditor-development-environment), a wrapper for the [SVGO](https://github.com/svg/svgo) tool:
 
 ```bash
-npm install -g svgo
-cd ckeditor5-package-name/theme/icons
-svgo --enable removeTitle -i .
+cd path/to/ckeditor5
+
+# Optimize all SVG files in the folder.
+npm run clean-up-svg-icons path/to/icons/*.svg
+
+# Optimize a single SVG file.
+npm run clean-up-svg-icons path/to/icon/icon.svg
 ```
 
-SVGO reduces the icon size up to 70%, depending on the software used to create it and the general complexity of the image.
+The script reduces the icon size up to 70%, depending on the software used to create it and the general complexity of the image.
+
+**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.
+* Make sure the number of `<path>` elements is minimal. Merge paths whenever possible in the image processor before saving the file.

package.json

@@ -81,6 +81,7 @@
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.23.0",
+    "svgo": "^1.1.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
     "umberto": "^0.12.0",
     "webpack": "^4.15.0"
@@ -115,7 +116,8 @@
     "release:bump-version": "node ./scripts/release/bump-versions.js",
     "release:publish": "node ./scripts/release/publish.js",
     "release:stable-branches": "sh ./scripts/update-stable-branches.sh",
-    "switch-to-dev-dev": "sh ./scripts/switch-to-dev-dev.sh"
+    "switch-to-dev-dev": "sh ./scripts/switch-to-dev-dev.sh",
+    "clean-up-svg-icons": "sh ./scripts/clean-up-svg-icons.sh"
   },
   "lint-staged": {
     "**/*.js": [

scripts/clean-up-svg-icons.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+# For licensing, see LICENSE.md.
+
+# Cleans up and optimizes SVG files using the SVGO utility.
+# The configuration file is located in svgo.config.json.
+#
+# Usage:
+#	npm run clean-up-svg-icons path/to/icons/*.svg
+
+for i in "$@"
+do
+	svgo --config=./scripts/svgo.config.json -i $i
+done

scripts/svgo.config.json

@@ -0,0 +1,10 @@
+{
+	"plugins": [
+		"collapseGroups",
+		"removeDimensions",
+		{ "removeAttrs": { "attrs": "(fill|stroke|fill-rule)" } },
+		"removeTitle",
+		"removeComments",
+		"removeMetadata"
+	]
+}