From 2fb4bb24f06fa822cae8cf50eb1b0a5a3844c30b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 9 Mar 2021 17:58:23 +0100 Subject: [PATCH 1/5] Created the caption icon. --- packages/ckeditor5-core/theme/icons/caption.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/ckeditor5-core/theme/icons/caption.svg diff --git a/packages/ckeditor5-core/theme/icons/caption.svg b/packages/ckeditor5-core/theme/icons/caption.svg new file mode 100644 index 00000000000..7e75463ff48 --- /dev/null +++ b/packages/ckeditor5-core/theme/icons/caption.svg @@ -0,0 +1 @@ + \ No newline at end of file From 596f9f63d4be8149083cf8affedcdcc723f9e074 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 9 Mar 2021 17:59:03 +0100 Subject: [PATCH 2/5] Bumped SVGO dependency, updated SVGO config file, enabled the removeDimensions plugin. --- package.json | 2 +- scripts/clean-up-svg-icons.sh | 2 +- scripts/svgo.config.js | 34 ++++++++++++++++++++++++++++++++++ scripts/svgo.config.json | 11 ----------- 4 files changed, 36 insertions(+), 13 deletions(-) create mode 100644 scripts/svgo.config.js delete mode 100644 scripts/svgo.config.json diff --git a/package.json b/package.json index 2eb4b76de6c..b2bf7cf6098 100644 --- a/package.json +++ b/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", diff --git a/scripts/clean-up-svg-icons.sh b/scripts/clean-up-svg-icons.sh index cd1a76998de..a7738f396a7 100644 --- a/scripts/clean-up-svg-icons.sh +++ b/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 diff --git a/scripts/svgo.config.js b/scripts/svgo.config.js new file mode 100644 index 00000000000..1a56402b791 --- /dev/null +++ b/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' } + ] ) +}; diff --git a/scripts/svgo.config.json b/scripts/svgo.config.json deleted file mode 100644 index dd23855577c..00000000000 --- a/scripts/svgo.config.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "plugins": [ - "collapseGroups", - "removeDimensions", - { "removeAttrs": { "attrs": "(fill|stroke|fill-rule)" } }, - { "convertPathData": { "noSpaceAfterFlags": false } }, - "removeTitle", - "removeComments", - "removeMetadata" - ] -} From 0da0ee00a52f1b51ddd01106d761a62a5eed0c6b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 9 Mar 2021 18:01:14 +0100 Subject: [PATCH 3/5] Added the caption icon to the ckeditor5-core index file. --- packages/ckeditor5-core/src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/ckeditor5-core/src/index.js b/packages/ckeditor5-core/src/index.js index 039c9edf91f..6e006f47abc 100644 --- a/packages/ckeditor5-core/src/index.js +++ b/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, From f2f13a42648874de06651f1d13c7d76d8280f2d6 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 9 Mar 2021 18:04:44 +0100 Subject: [PATCH 4/5] Updated the caption icon. --- packages/ckeditor5-core/theme/icons/caption.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-core/theme/icons/caption.svg b/packages/ckeditor5-core/theme/icons/caption.svg index 7e75463ff48..b0ac8416fa1 100644 --- a/packages/ckeditor5-core/theme/icons/caption.svg +++ b/packages/ckeditor5-core/theme/icons/caption.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From d110ef22a61f30a4f5070ace8ec0eaa4f4572993 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 9 Mar 2021 18:11:04 +0100 Subject: [PATCH 5/5] Updated the SVGO (icons) section of the development environment guide. --- docs/framework/guides/contributing/development-environment.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/framework/guides/contributing/development-environment.md b/docs/framework/guides/contributing/development-environment.md index 952fe12ed2f..a2c4838cfb7 100644 --- a/docs/framework/guides/contributing/development-environment.md +++ b/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 `...`. They should be removed from the source. +* Sometimes SVGO leaves empty (transparent) groups `...`. They should be removed from the source and running `clean-up-svg-icons` again usually does that. * Make sure the number of `` elements is minimal. Merge paths whenever possible in the image processor before saving the file.