Browse Source

Merge pull request #1361 from ckeditor/t/ckeditor5-theme-lark/206

Internal: Created the `clean-up-svg-icons` npm task that optimizes SVG icons. Added SVGO to npm dependencies. Updated the Development Environment guide (see ckeditor/ckeditor5-theme-lark#206).
Piotrek Koszuliński 7 years ago
parent
commit
27d04155dc

+ 15 - 5
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.
 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
 ```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.

+ 3 - 1
package.json

@@ -81,6 +81,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.23.0",
     "style-loader": "^0.23.0",
+    "svgo": "^1.1.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
     "uglifyjs-webpack-plugin": "^1.2.7",
     "umberto": "^0.12.0",
     "umberto": "^0.12.0",
     "webpack": "^4.15.0"
     "webpack": "^4.15.0"
@@ -115,7 +116,8 @@
     "release:bump-version": "node ./scripts/release/bump-versions.js",
     "release:bump-version": "node ./scripts/release/bump-versions.js",
     "release:publish": "node ./scripts/release/publish.js",
     "release:publish": "node ./scripts/release/publish.js",
     "release:stable-branches": "sh ./scripts/update-stable-branches.sh",
     "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": {
   "lint-staged": {
     "**/*.js": [
     "**/*.js": [

+ 15 - 0
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

+ 10 - 0
scripts/svgo.config.json

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