Move all icons to the @ckeditor/ckeditor5-icons package

docs/_snippets/examples/bottom-toolbar-editor.js

@@ -6,6 +6,7 @@
 /* globals console, window, document */
 
 import { Plugin } from '@ckeditor/ckeditor5-core';
+import { IconFontColor } from '@ckeditor/ckeditor5-icons';
 import { Font } from '@ckeditor/ckeditor5-font';
 import { Indent } from '@ckeditor/ckeditor5-indent';
 import { List } from '@ckeditor/ckeditor5-list';
@@ -26,8 +27,6 @@ import { Bold, Italic, Strikethrough, Superscript, Subscript, Underline } from '
 import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
 
-import fontColorIcon from '@ckeditor/ckeditor5-font/theme/icons/font-color.svg';
-
 import DecoupledEditor from '../build-decoupled-document.js';
 
 class FormattingOptions extends Plugin {
@@ -96,7 +95,7 @@ class FormattingOptions extends Plugin {
 			// Using the font color icon to visually represent the formatting.
 			dropdownView.buttonView.set( {
 				tooltip: t( 'Formatting options' ),
-				icon: fontColorIcon
+				icon: IconFontColor
 			} );
 
 			dropdownView.panelView.children.add( toolbarView );

docs/_snippets/framework/ui/ui-balloon.js

@@ -32,16 +32,12 @@ import {
 	createLabeledInputText
 } from '@ckeditor/ckeditor5-ui';
 import { Collection, Locale } from '@ckeditor/ckeditor5-utils';
-
-import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
-import boldIcon from '@ckeditor/ckeditor5-core/theme/icons/bold.svg';
-import { icons as coreIcons } from 'ckeditor5/src/core.js';
-
 import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Essentials } from '@ckeditor/ckeditor5-essentials';
 import { Bold, Italic, Underline } from '@ckeditor/ckeditor5-basic-styles';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import * as icons from '@ckeditor/ckeditor5-icons';
 
 window.BalloonPanelView = BalloonPanelView;
 window.ButtonView = ButtonView;
@@ -68,11 +64,7 @@ window.createLabeledInputText = createLabeledInputText;
 window.Collection = Collection;
 window.Locale = Locale;
 
-window.checkIcon = coreIcons.check;
-window.coreIcons = coreIcons;
-window.cancelIcon = coreIcons.cancel;
-window.boldIcon = boldIcon;
-window.italicIcon = italicIcon;
+window.icons = icons;
 
 window.DialogViewPosition = DialogViewPosition;
 window.Plugin = Plugin;

docs/_snippets/framework/ui/ui-button.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-/* globals document, console, Locale, ButtonView, checkIcon, ToolbarView, ClassicEditor, TooltipManager, Essentials */
+/* globals document, console, Locale, ButtonView, icons, ToolbarView, ClassicEditor, TooltipManager, Essentials */
 
 const locale = new Locale();
 
@@ -35,7 +35,7 @@ const saveButton = new ButtonView();
 saveButton.set( {
 	label: 'Save',
 	withText: false,
-	icon: checkIcon,
+	icon: icons.IconCheck,
 	class: 'ck-button-save'
 } );
 saveButton.render();

docs/_snippets/framework/ui/ui-dropdown.js

@@ -4,7 +4,7 @@
  */
 
 /* globals Locale, Collection, Model, createDropdown, addListToDropdown, ButtonView,
-boldIcon, italicIcon, SplitButtonView, addToolbarToDropdown, ToolbarView, document */
+icons, SplitButtonView, addToolbarToDropdown, ToolbarView, document */
 
 const locale = new Locale();
 
@@ -35,8 +35,8 @@ listDropdown.render();
 const bold = new ButtonView();
 const italic = new ButtonView();
 
-bold.set( { label: 'Bold', withText: false, icon: boldIcon } );
-italic.set( { label: 'Italic', withText: false, icon: italicIcon } );
+bold.set( { label: 'Bold', withText: false, icon: icons.IconBold } );
+italic.set( { label: 'Italic', withText: false, icon: icons.IconItalic } );
 
 const buttons = [ bold, italic ];
 

docs/_snippets/framework/ui/ui-icons.js

@@ -3,13 +3,13 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-/* globals Locale, ToolbarView, coreIcons, IconView, document */
+/* globals Locale, ToolbarView, icons, IconView, document */
 
 const locale = new Locale();
 
 const toolbarIcons = new ToolbarView( locale );
 
-Object.values( coreIcons ).forEach( svg => {
+Object.values( icons ).forEach( svg => {
 	const icon = new IconView();
 	icon.content = svg;
 	icon.render();

docs/_snippets/tutorials/abbreviationView-level-2.js

@@ -10,7 +10,7 @@ import {
 	ButtonView,
 	submitHandler
 } from '@ckeditor/ckeditor5-ui';
-import { icons } from '@ckeditor/ckeditor5-core';
+import { IconCheck, IconCancel } from '@ckeditor/ckeditor5-icons';
 
 export default class FormView extends View {
 	constructor( locale ) {
@@ -19,11 +19,11 @@ export default class FormView extends View {
 		this.abbrInputView = this._createInput( 'Add abbreviation' );
 		this.titleInputView = this._createInput( 'Add title' );
 
-		this.saveButtonView = this._createButton( 'Save', icons.check, 'ck-button-save' );
+		this.saveButtonView = this._createButton( 'Save', IconCheck, 'ck-button-save' );
 		// Submit type of the button will trigger the submit event on entire form when clicked (see submitHandler() in render() below).
 		this.saveButtonView.type = 'submit';
 
-		this.cancelButtonView = this._createButton( 'Cancel', icons.cancel, 'ck-button-cancel' );
+		this.cancelButtonView = this._createButton( 'Cancel', IconCancel, 'ck-button-cancel' );
 
 		// Delegate ButtonView#execute to FormView#cancel
 		this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );

docs/_snippets/tutorials/abbreviationView-level-3.js

@@ -12,7 +12,7 @@ import {
 	FocusCycler
 } from '@ckeditor/ckeditor5-ui';
 import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import { icons } from '@ckeditor/ckeditor5-core';
+import { IconCheck, IconCancel } from '@ckeditor/ckeditor5-icons';
 
 export default class FormView extends View {
 	constructor( locale ) {
@@ -24,12 +24,12 @@ export default class FormView extends View {
 		this.abbrInputView = this._createInput( 'Add abbreviation' );
 		this.titleInputView = this._createInput( 'Add title' );
 
-		this.saveButtonView = this._createButton( 'Save', icons.check, 'ck-button-save' );
+		this.saveButtonView = this._createButton( 'Save', IconCheck, 'ck-button-save' );
 
 		// Submit type of the button will trigger the submit event on entire form when clicked (see submitHandler() in render() below).
 		this.saveButtonView.type = 'submit';
 
-		this.cancelButtonView = this._createButton( 'Cancel', icons.cancel, 'ck-button-cancel' );
+		this.cancelButtonView = this._createButton( 'Cancel', IconCancel, 'ck-button-cancel' );
 
 		// Delegate ButtonView#execute to FormView#cancel
 		this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );

docs/examples/builds/balloon-block-editor.md

@@ -12,7 +12,7 @@ classes: main__content--no-toc
 The balloon block editor type lets you create your content directly in its target location with the help of two toolbars:
 
 * A balloon toolbar that appears next to the selected editable document element (offering inline content formatting tools).
-* A {@link getting-started/setup/toolbar#block-toolbar block toolbar} accessible using the toolbar handle button {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator}  attached to the editable content area and following the selection in the document (bringing additional block formatting tools). The {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} button is also a handle that can be used to drag and drop blocks around the content.
+* A {@link getting-started/setup/toolbar#block-toolbar block toolbar} accessible using the toolbar handle button {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg Drag indicator}  attached to the editable content area and following the selection in the document (bringing additional block formatting tools). The {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg Drag indicator} button is also a handle that can be used to drag and drop blocks around the content.
 
 <info-box hint>
 	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-balloon-block) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).

docs/examples/custom/bottom-toolbar-editor.md

@@ -59,10 +59,12 @@ import {
 	DropdownButtonView,
 	DropdownPanelView,
 	DropdownView,
-	ToolbarView
+	ToolbarView,
+	IconFontColor
 } from 'ckeditor5';
 import { EasyImage } from 'ckeditor5-premium-features';
-import fontColorIcon from '@ckeditor/ckeditor5-font/theme/icons/font-color.svg';
+
+const fontColorIcon =/* #__PURE__ */ registerIcon( 'fontColor', IconFontColor );
 
 class FormattingOptions extends Plugin {
 	/**
@@ -143,7 +145,7 @@ class FormattingOptions extends Plugin {
 			// Using the font color icon to visually represent the formatting.
 			buttonView.set( {
 				tooltip: t( 'Formatting options' ),
-				icon: fontColorIcon
+				icon: fontColorIcon()
 			} );
 
 			dropdownView.panelView.children.add( toolbarView );

docs/features/image-upload.md

@@ -18,7 +18,7 @@ Inserting {@link features/images-overview images} into content created with CKEd
 
 ## Demo
 
-This demo is configured to use {@link features/ckbox CKBox} for image upload and management. Use the image upload button {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image} to upload images or the CKBox button {@icon @ckeditor/ckeditor5-core/theme/icons/browse-files.svg Open file manager} to browse and select existing images from the file manager. It also includes the `AutoImage` plugin, which lets you {@link features/images-inserting#inserting-images-via-pasting-a-url-into-the-editor paste image URLs directly}.
+This demo is configured to use {@link features/ckbox CKBox} for image upload and management. Use the image upload button {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image} to upload images or the CKBox button {@icon @ckeditor/ckeditor5-icons/theme/icons/browse-files.svg Open file manager} to browse and select existing images from the file manager. It also includes the `AutoImage` plugin, which lets you {@link features/images-inserting#inserting-images-via-pasting-a-url-into-the-editor paste image URLs directly}.
 
 {@snippet features/image-upload}