diff --git a/docs/_snippets/examples/bottom-toolbar-editor.js b/docs/_snippets/examples/bottom-toolbar-editor.js index 93b870020fe..a056cf1f848 100644 --- a/docs/_snippets/examples/bottom-toolbar-editor.js +++ b/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 ); diff --git a/docs/_snippets/framework/ui/ui-balloon.js b/docs/_snippets/framework/ui/ui-balloon.js index 4f7146d2f9c..5433e13c06f 100644 --- a/docs/_snippets/framework/ui/ui-balloon.js +++ b/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; diff --git a/docs/_snippets/framework/ui/ui-button.js b/docs/_snippets/framework/ui/ui-button.js index 87f63f1457c..2c9a115e994 100644 --- a/docs/_snippets/framework/ui/ui-button.js +++ b/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(); diff --git a/docs/_snippets/framework/ui/ui-dropdown.js b/docs/_snippets/framework/ui/ui-dropdown.js index 55e8afb16bc..23f2b3242bc 100644 --- a/docs/_snippets/framework/ui/ui-dropdown.js +++ b/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 ]; diff --git a/docs/_snippets/framework/ui/ui-icons.js b/docs/_snippets/framework/ui/ui-icons.js index ecedcacd258..66fcaf78f78 100644 --- a/docs/_snippets/framework/ui/ui-icons.js +++ b/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(); diff --git a/docs/_snippets/tutorials/abbreviationView-level-2.js b/docs/_snippets/tutorials/abbreviationView-level-2.js index bffccd2336b..6e29c40d8ed 100644 --- a/docs/_snippets/tutorials/abbreviationView-level-2.js +++ b/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' ); diff --git a/docs/_snippets/tutorials/abbreviationView-level-3.js b/docs/_snippets/tutorials/abbreviationView-level-3.js index f1061d0d09c..6907c939695 100644 --- a/docs/_snippets/tutorials/abbreviationView-level-3.js +++ b/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' ); diff --git a/docs/examples/builds/balloon-block-editor.md b/docs/examples/builds/balloon-block-editor.md index 1cdf2625d52..0e9475e437e 100644 --- a/docs/examples/builds/balloon-block-editor.md +++ b/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. 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). diff --git a/docs/examples/custom/bottom-toolbar-editor.md b/docs/examples/custom/bottom-toolbar-editor.md index 89e1e70c46c..6a4b180207d 100644 --- a/docs/examples/custom/bottom-toolbar-editor.md +++ b/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 ); diff --git a/docs/features/image-upload.md b/docs/features/image-upload.md index dccc37b8e5c..572fd5c5a20 100644 --- a/docs/features/image-upload.md +++ b/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} diff --git a/docs/features/index.md b/docs/features/index.md index 45162244e94..3e2dc2bcbf2 100644 --- a/docs/features/index.md +++ b/docs/features/index.md @@ -25,25 +25,25 @@ CKEditor 5 features cover several functional areas. Listed below are some o ### Formatting features -{@link features/basic-styles Basic text styles} include essentials like bold {@icon @ckeditor/ckeditor5-core/theme/icons/bold.svg Bold}, italics {@icon @ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg Italic}, superscript {@icon @ckeditor/ckeditor5-basic-styles/theme/icons/superscript.svg Superscript}, and subscript {@icon @ckeditor/ckeditor5-basic-styles/theme/icons/subscript.svg Subscript} as well as inline code formatting and more. +{@link features/basic-styles Basic text styles} include essentials like bold {@icon @ckeditor/ckeditor5-icons/theme/icons/bold.svg Bold}, italics {@icon @ckeditor/ckeditor5-icons/theme/icons/italic.svg Italic}, superscript {@icon @ckeditor/ckeditor5-icons/theme/icons/superscript.svg Superscript}, and subscript {@icon @ckeditor/ckeditor5-icons/theme/icons/subscript.svg Subscript} as well as inline code formatting and more. -The {@link features/font font feature} provides support for using different font families {@icon @ckeditor/ckeditor5-font/theme/icons/font-family.svg Font Family}, controlling the font size {@icon @ckeditor/ckeditor5-font/theme/icons/font-size.svg Font Size} as well as font {@icon @ckeditor/ckeditor5-font/theme/icons/font-color.svg Font Color} and background colors {@icon @ckeditor/ckeditor5-font/theme/icons/font-background.svg Background Colors}. +The {@link features/font font feature} provides support for using different font families {@icon @ckeditor/ckeditor5-icons/theme/icons/font-family.svg Font Family}, controlling the font size {@icon @ckeditor/ckeditor5-icons/theme/icons/font-size.svg Font Size} as well as font {@icon @ckeditor/ckeditor5-icons/theme/icons/font-color.svg Font Color} and background colors {@icon @ckeditor/ckeditor5-icons/theme/icons/font-background.svg Background Colors}. -{@link features/headings Headings} {@icon @ckeditor/ckeditor5-core/theme/icons/heading1.svg Heading 1} (with configurable levels and styles) and the {@link features/text-alignment text alignment feature} {@icon @ckeditor/ckeditor5-core/theme/icons/align-left.svg Align Left} help organize the structure of the document. +{@link features/headings Headings} {@icon @ckeditor/ckeditor5-icons/theme/icons/heading1.svg Heading 1} (with configurable levels and styles) and the {@link features/text-alignment text alignment feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/align-left.svg Align Left} help organize the structure of the document. -You can apply most of these formatting options from the {@link getting-started/setup/toolbar toolbar} or on the go, as you type, thanks to the {@link features/autoformat autoformatting feature} that employs Markdown syntax. You can remove them with the {@link features/remove-format remove format feature} {@icon @ckeditor/ckeditor5-remove-format/theme/icons/remove-format.svg Remove Format}. +You can apply most of these formatting options from the {@link getting-started/setup/toolbar toolbar} or on the go, as you type, thanks to the {@link features/autoformat autoformatting feature} that employs Markdown syntax. You can remove them with the {@link features/remove-format remove format feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/remove-format.svg Remove Format}. {@img assets/img/features-basic-formatting.png 800 CKEditor 5 formatting features.} ### Advanced content editing -Rich text would not be rich without images. You can upload, caption, edit, or style them. You can even paste them straight from the URL with the help of the {@link features/images-overview image feature} {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image} and create a responsive design. If that is not enough, {@link features/media-embed embed media} {@icon @ckeditor/ckeditor5-media-embed/theme/icons/media.svg Media} into your content. +Rich text would not be rich without images. You can upload, caption, edit, or style them. You can even paste them straight from the URL with the help of the {@link features/images-overview image feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image} and create a responsive design. If that is not enough, {@link features/media-embed embed media} {@icon @ckeditor/ckeditor5-icons/theme/icons/media.svg Media} into your content. -{@link features/link Links} {@icon @ckeditor/ckeditor5-link/theme/icons/link.svg Link} are an essential feature for online content. You can paste, change, or attribute them. +{@link features/link Links} {@icon @ckeditor/ckeditor5-icons/theme/icons/link.svg Link} are an essential feature for online content. You can paste, change, or attribute them. -Provide clear and accessible data using {@link features/tables tables} {@icon @ckeditor/ckeditor5-core/theme/icons/table.svg Table} (you can even nest them to create advanced layouts), ordered {@icon @ckeditor/ckeditor5-core/theme/icons/numberedlist.svg Numbered List} and unordered {@link features/lists lists} {@icon @ckeditor/ckeditor5-core/theme/icons/bulletedlist.svg Bulleted List} with various markers to choose from, and {@link features/todo-lists to-do lists} {@icon @ckeditor/ckeditor5-core/theme/icons/todolist.svg To-do List}. Use {@link features/indent indents and outdents} {@icon @ckeditor/ckeditor5-core/theme/icons/indent.svg Indent} and {@link features/block-quote block quotes} {@icon @ckeditor/ckeditor5-core/theme/icons/quote.svg Quote} to structure the content and draw the reader's attention to it. +Provide clear and accessible data using {@link features/tables tables} {@icon @ckeditor/ckeditor5-icons/theme/icons/table.svg Table} (you can even nest them to create advanced layouts), ordered {@icon @ckeditor/ckeditor5-icons/theme/icons/numbered-list.svg Numbered List} and unordered {@link features/lists lists} {@icon @ckeditor/ckeditor5-icons/theme/icons/bulleted-list.svg Bulleted List} with various markers to choose from, and {@link features/todo-lists to-do lists} {@icon @ckeditor/ckeditor5-icons/theme/icons/todo-list.svg To-do List}. Use {@link features/indent indents and outdents} {@icon @ckeditor/ckeditor5-icons/theme/icons/indent.svg Indent} and {@link features/block-quote block quotes} {@icon @ckeditor/ckeditor5-icons/theme/icons/quote.svg Quote} to structure the content and draw the reader's attention to it. -Enrich your content further by {@link features/html-embed embedding HTML code} {@icon @ckeditor/ckeditor5-core/theme/icons/html.svg HTML} – this one is useful for webmasters. If you need to present code instead of employing it, use the {@link features/code-blocks code block} {@icon @ckeditor/ckeditor5-core/theme/icons/codeblock.svg Code Block} that lets you produce code listing with a syntax highlight, too! +Enrich your content further by {@link features/html-embed embedding HTML code} {@icon @ckeditor/ckeditor5-icons/theme/icons/html.svg HTML} – this one is useful for webmasters. If you need to present code instead of employing it, use the {@link features/code-blocks code block} {@icon @ckeditor/ckeditor5-icons/theme/icons/code-block.svg Code Block} that lets you produce code listing with a syntax highlight, too! {@img assets/img/features-images.png 800 CKEditor 5 image feature.} @@ -51,25 +51,25 @@ Enrich your content further by {@link features/html-embed embedding HTML code} { We created the {@link framework/index CKEditor 5 Framework} with {@link features/collaboration collaboration} in mind. -All collaboration features manage user data and permissions with the {@link features/users users API}. {@link features/track-changes Track changes} {@icon @ckeditor/ckeditor5-track-changes/theme/icons/track-changes.svg Track changes} allows the users to follow any changes made to the edited document both asynchronously and in real time. The users accept or reject these changes with a single click from a convenient side panel. +All collaboration features manage user data and permissions with the {@link features/users users API}. {@link features/track-changes Track changes} {@icon @ckeditor/ckeditor5-icons/theme/icons/track-changes.svg Track changes} allows the users to follow any changes made to the edited document both asynchronously and in real time. The users accept or reject these changes with a single click from a convenient side panel. -Where tracking changes is not enough, the {@link features/comments comments} {@icon @ckeditor/ckeditor5-comments/theme/icons/add-comment.svg Comments} come in, offering a perfect collaborative communication platform for writing and editing as a team. When you resolve a discussion, it moves to the comments archive. +Where tracking changes is not enough, the {@link features/comments comments} {@icon @ckeditor/ckeditor5-icons/theme/icons/add-comment.svg Comments} come in, offering a perfect collaborative communication platform for writing and editing as a team. When you resolve a discussion, it moves to the comments archive. -Additionally, CKEditor 5 offers the {@link features/restricted-editing restricted editing mode} {@icon @ckeditor/ckeditor5-restricted-editing/theme/icons/contentunlock.svg Enable editing} where just the selected parts of the content may be edited by some users, based on a permissions system. And when there is a need for even more control, there are the {@link features/read-only read-only} and {@link features/comments-only-mode comments-only} modes that let the user access the content, but not edit it. +Additionally, CKEditor 5 offers the {@link features/restricted-editing restricted editing mode} {@icon @ckeditor/ckeditor5-icons/theme/icons/content-unlock.svg Enable editing} where just the selected parts of the content may be edited by some users, based on a permissions system. And when there is a need for even more control, there are the {@link features/read-only read-only} and {@link features/comments-only-mode comments-only} modes that let the user access the content, but not edit it. {@img assets/img/features-collaboration.png 800 CKEditor 5 collaboration features.} -You can also track the progress and changes done in the content with the {@link features/revision-history revision history feature} {@icon @ckeditor/ckeditor5-core/theme/icons/history.svg Revision history}. This robust document versioning tool lets you create named versions, compare changes, and restore previous document versions. It tracks all progress – also when many editors work together. +You can also track the progress and changes done in the content with the {@link features/revision-history revision history feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/history.svg Revision history}. This robust document versioning tool lets you create named versions, compare changes, and restore previous document versions. It tracks all progress – also when many editors work together. {@img assets/img/features-revision-history.png 800 CKEditor 5 document versioning feature.} ### Document conversion -If you need to share the document outside your team, use the {@link features/export-pdf export to PDF feature} {@icon @ckeditor/ckeditor5-export-pdf/theme/icons/exportpdf.svg Export to PDF} to produce industry-standard, portable, cross-platform files. +If you need to share the document outside your team, use the {@link features/export-pdf export to PDF feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/export-pdf.svg Export to PDF} to produce industry-standard, portable, cross-platform files. -If you need to work further on the document, choose the {@link features/export-word export to Word feature} {@icon @ckeditor/ckeditor5-export-word/theme/icons/exportword.svg Export to Word} instead – and keep your comments and changes in the resulting document, ready to edit further. +If you need to work further on the document, choose the {@link features/export-word export to Word feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/export-word.svg Export to Word} instead – and keep your comments and changes in the resulting document, ready to edit further. -The {@link features/pagination pagination feature} {@icon @ckeditor/ckeditor5-pagination/theme/icons/arrow-up.svg Previous page}{@icon @ckeditor/ckeditor5-pagination/theme/icons/arrow-down.svg Next page} complements the exports to ensure all produced documents will always look the way they should. +The {@link features/pagination pagination feature} {@icon @ckeditor/ckeditor5-icons/theme/icons/arrow-up.svg Previous page}{@icon @ckeditor/ckeditor5-icons/theme/icons/arrow-down.svg Next page} complements the exports to ensure all produced documents will always look the way they should. If you have any documents in the DOCX format, you can convert them into HTML with the {@link features/import-word import from Word feature} and then continue editing in CKEditor 5. @@ -81,7 +81,7 @@ The CKEditor 5 WYSIWYG editor by default produces HTML output that you can ### Other productivity features -The {@link features/ai-assistant-overview AI Assistant} {@icon ckeditor5-collaboration/theme/icons/robot-pencil.svg AI Assistant} will help you rewrite, edit, or translate the existing content to match your needs, or even come up with a completely new one! +The {@link features/ai-assistant-overview AI Assistant} {@icon @ckeditor/ckeditor5-icons/theme/icons/robot-pencil.svg AI Assistant} will help you rewrite, edit, or translate the existing content to match your needs, or even come up with a completely new one! The {@link features/word-count word and character counter} will help you track progress and control the volume of the content. diff --git a/docs/framework/architecture/ui-components.md b/docs/framework/architecture/ui-components.md index d689d48c119..24db58aed43 100644 --- a/docs/framework/architecture/ui-components.md +++ b/docs/framework/architecture/ui-components.md @@ -150,14 +150,14 @@ To get a button with an icon, import it first. Then set the `icon` property on t ```js -import { ButtonView, icons } from 'ckeditor5'; +import { ButtonView, IconCheck } from 'ckeditor5'; const saveButton = new ButtonView(); saveButton.set( { label: 'Save', withText: false, - icon: icons.check, + icon: IconCheck, class: 'ck-button-save' } ); saveButton.render(); @@ -385,10 +385,11 @@ You can use the {@link module:ui/dropdown/utils#addToolbarToDropdown `addToolbar ```js import { addToolbarToDropdown, - icons, ButtonView, createDropdown, - Locale + Locale, + IconBold, + IconItalic } from 'ckeditor5'; const locale = new Locale(); @@ -396,8 +397,8 @@ const locale = new Locale(); const bold = new ButtonView(); const italic = new ButtonView(); -bold.set( { label: 'Bold', withText: false, icon: icons.bold } ); -italic.set( { label: 'Italic', withText: false, icon: icons.italic } ); +bold.set( { label: 'Bold', withText: false, icon: IconBold } ); +italic.set( { label: 'Italic', withText: false, icon: IconItalic } ); const buttons = [ bold, italic ]; @@ -473,9 +474,10 @@ import { addToolbarToDropdown, ButtonView, createDropdown, - icons, SplitButtonViewm, - Locale + Locale, + IconBold, + IconItalic } from 'ckeditor5'; const locale = new Locale(); @@ -483,8 +485,8 @@ const locale = new Locale(); const bold = new ButtonView(); const italic = new ButtonView(); -bold.set( { label: 'Bold', withText: false, icon: icons.bold } ); -italic.set( { label: 'Italic', withText: false, icon: icons.italic } ); +bold.set( { label: 'Bold', withText: false, icon: IconBold } ); +italic.set( { label: 'Italic', withText: false, icon: IconItalic } ); const buttons = [ bold, italic ]; @@ -783,127 +785,18 @@ The CKEditor 5 library has a collection of icons representing different edi ```js -import { icons, IconView } from 'ckeditor5'; +import { IconView, IconBold } from 'ckeditor5'; const icon = new IconView(); -icon.content = icons.bold; +icon.content = IconBold; icon.render(); document.getElementById( 'icon-bold' ).append( icon.element ); ``` -CKEditor 5 features use different icons. You can find them in their respective packages. Here is a list of all available icons. - - -```js -import { icons } from 'ckeditor5'; - -console.log( icons.bold ); -console.log( icons.italic ); -console.log( icons.underline ); -console.log( icons.code ); -console.log( icons.strikethrough ); -console.log( icons.subscript ); -console.log( icons.superscript ); - -console.log( icons.browserFiles ); - -console.log( icons.codeBlock ); - -console.log( icons.cancel ); -console.log( icons.caption ); -console.log( icons.check ); -console.log( icons.cog ); -console.log( icons.eraser ); -console.log( icons.lowVision ); -console.log( icons.textAlternative ); -console.log( icons.image ); -console.log( icons.alignBottom ); -console.log( icons.alignMiddle ); -console.log( icons.alignTop ); -console.log( icons.alignLeft ); -console.log( icons.alignCenter ); -console.log( icons.alignRight ); -console.log( icons.alignJustify ); -console.log( icons.objectLeft ); -console.log( icons.objectCenter ); -console.log( icons.objectRight ); -console.log( icons.objectFullWidth ); -console.log( icons.objectInline ); -console.log( icons.objectBlockLeft ); -console.log( icons.objectBlockRight ); -console.log( icons.objectFullSize ); -console.log( icons.objectSizeLarge ); -console.log( icons.objectSizeSmall ); -console.log( icons.objectSizeMedium ); -console.log( icons.pencil ); -console.log( icons.pilcrow ); -console.log( icons.quote ); -console.log( icons.threeVerticalDots ); - -console.log( icons.fontFamily ); -console.log( icons.fontSize ); -console.log( icons.fontColor ); -console.log( icons.fontBackground ); - -console.log( icons.heading1 ); -console.log( icons.heading2 ); -console.log( icons.heading3 ); -console.log( icons.heading4 ); -console.log( icons.heading5 ); -console.log( icons.heading6 ); - -console.log( icons.indent ); -console.log( icons.outdent ); - -console.log( icons.marker ); -console.log( icons.pen ); - -console.log( icons.html ); - -console.log( icons.link ); -console.log( icons.unlink ); - -console.log( icons.bulletedList ); -console.log( icons.numberedList ); -console.log( icons.todoList ); - -console.log( icons.media ); - -console.log( icons.pageBreak ); - -console.log( icons.paragraph ); - -console.log( icons.removeFormat ); - -console.log( icons.contentLock ); -console.log( icons.contentUnlock ); - -console.log( icons.selectAll ); - -console.log( icons.sourceEditing ); - -console.log( icons.specialCharacters ); - -console.log( icons.table ); -console.log( icons.tableRow ); -console.log( icons.tableColumn ); -console.log( icons.tableMergeCell ); -console.log( icons.tableCellProperties ); -console.log( icons.tableProperties ); - -console.log( icons.nextArrow ); -console.log( icons.previousArrow ); - -console.log( icons.undo ); -console.log( icons.redo ); - -console.log( icons.history ); -console.log( icons.loupe ); -``` - +CKEditor 5 features use different icons. You can find them in the `@ckeditor/ckeditor5-icons` package. You can also {@link framework/architecture/ui-library#setting-label-icon-and-tooltip add a custom icon to the dropdown} by providing the entire XML string of the icon diff --git a/docs/framework/architecture/ui-library.md b/docs/framework/architecture/ui-library.md index 4d14d8f4ab1..e1bcd6bc545 100644 --- a/docs/framework/architecture/ui-library.md +++ b/docs/framework/architecture/ui-library.md @@ -569,12 +569,12 @@ By default, the "Close" button ("X") is added to the header as long as you provi ```js -import { icons } from 'ckeditor5'; +import { IconPencil } from 'ckeditor5'; // ... editor.plugins.get( 'Dialog' ).show( { - icon: icons.pencil, + icon: IconPencil, title: 'My first dialog', // Do not display the "Close" button. hasCloseButton: false, diff --git a/docs/framework/contributing/code-style.md b/docs/framework/contributing/code-style.md index e8b418cf2c1..1e9dc0e79ed 100644 --- a/docs/framework/contributing/code-style.md +++ b/docs/framework/contributing/code-style.md @@ -1086,7 +1086,7 @@ This rule ensures that all imports from the `@ckeditor/*` packages are done thro import Table from '@ckeditor/ckeditor5-table/src/table'; // Importing from the `/theme/` folder is not allowed. -import BoldIcon from '@ckeditor/ckeditor5-core/theme/icons/bold.svg'; +import BoldIcon from '@ckeditor/ckeditor5-icons/theme/icons/bold.svg'; ``` đź‘Ť  Examples of correct code for this rule: diff --git a/docs/framework/contributing/package-metadata.md b/docs/framework/contributing/package-metadata.md index 676d6f4bcba..650099198ed 100644 --- a/docs/framework/contributing/package-metadata.md +++ b/docs/framework/contributing/package-metadata.md @@ -56,7 +56,7 @@ Below is an example showing how the `Bold` plugin can be documented using this f { "type": "Button", "name": "bold", - "iconPath": "theme/icons/bold.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/bold.svg" } ], "htmlOutput": [ diff --git a/docs/framework/deep-dive/localization.md b/docs/framework/deep-dive/localization.md index 78712880d94..4983dbf259d 100644 --- a/docs/framework/deep-dive/localization.md +++ b/docs/framework/deep-dive/localization.md @@ -258,7 +258,7 @@ public getDefaultCommands() { { id: 'blockQuote', commandName: 'blockQuote', - icon: icons.quote, + icon: IconQuote, title: translateVariableKey( 'Block quote' ), description: t( 'Create a block quote' ) }, diff --git a/docs/getting-started/advanced/integrating-from-source-webpack.md b/docs/getting-started/advanced/integrating-from-source-webpack.md index 6f757353b3c..4fbc6de32ad 100644 --- a/docs/getting-started/advanced/integrating-from-source-webpack.md +++ b/docs/getting-started/advanced/integrating-from-source-webpack.md @@ -93,7 +93,7 @@ module.exports = { module: { rules: [ { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /ckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, use: [ 'raw-loader' ] }, { @@ -170,7 +170,7 @@ module.exports = { use: [ 'ts-loader' ] }, { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /cckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, use: [ 'raw-loader' ] }, @@ -225,7 +225,7 @@ Encore. // Use raw-loader for CKEditor 5 SVG files. .addRule( { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /cckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, loader: 'raw-loader' } ) @@ -586,7 +586,7 @@ module.exports = { module: { rules: [ { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /cckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, use: [ 'raw-loader' ] }, { diff --git a/docs/getting-started/legacy-getting-started/integrations/react.md b/docs/getting-started/legacy-getting-started/integrations/react.md index 4334d51a2a7..fa27230e0a6 100644 --- a/docs/getting-started/legacy-getting-started/integrations/react.md +++ b/docs/getting-started/legacy-getting-started/integrations/react.md @@ -450,7 +450,7 @@ Then, add two new elements to the exported object under the `module.rules` array ```js { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /ckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, use: [ 'raw-loader' ] }, { diff --git a/docs/getting-started/legacy-getting-started/quick-start-other.md b/docs/getting-started/legacy-getting-started/quick-start-other.md index 4881997243f..c87dfde383d 100644 --- a/docs/getting-started/legacy-getting-started/quick-start-other.md +++ b/docs/getting-started/legacy-getting-started/quick-start-other.md @@ -240,7 +240,7 @@ module.exports = { module: { rules: [ { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /ckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, use: [ 'raw-loader' ] }, diff --git a/docs/getting-started/setup/toolbar.md b/docs/getting-started/setup/toolbar.md index 18fd0865d40..64ad27c4894 100644 --- a/docs/getting-started/setup/toolbar.md +++ b/docs/getting-started/setup/toolbar.md @@ -98,7 +98,7 @@ toolbar: { * **{@link module:core/editor/editorconfig~ToolbarConfig#shouldNotGroupWhenFull `shouldNotGroupWhenFull`}** – When set to `true`, the toolbar will stop grouping items and let them wrap to the next line when there is not enough space to display them in a single row. This setting is `false` by default, which enables item grouping. -The demo below presents the "regular" toolbar look with `shouldNotGroupWhenFull` set to `false`. If there are more toolbar items than can fit in the toolbar in the current display width, some items get hidden. You can access them by clicking the show more items button {@icon @ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg Show more items}. +The demo below presents the "regular" toolbar look with `shouldNotGroupWhenFull` set to `false`. If there are more toolbar items than can fit in the toolbar in the current display width, some items get hidden. You can access them by clicking the show more items button {@icon @ckeditor/ckeditor5-icons/theme/icons/three-vertical-dots.svg Show more items}. {@snippet installation/setup/toolbar-grouping} @@ -183,7 +183,7 @@ toolbar: [ ] ``` -It will create a "Basic styles" dropdown with a three vertical dots icon {@icon @ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg Three vertical dots} containing the additional basic text styles buttons set. You can test it in the demo below along with a few more toolbar dropdowns. +It will create a "Basic styles" dropdown with a three vertical dots icon {@icon @ckeditor/ckeditor5-icons/theme/icons/three-vertical-dots.svg Three vertical dots} containing the additional basic text styles buttons set. You can test it in the demo below along with a few more toolbar dropdowns. {@snippet installation/setup/toolbar-nested-simple} @@ -215,15 +215,15 @@ You can use one of the icons listed below for your dropdown: | Icon name | Preview | |-------------------|-----------------------------------------------------------------------------| -| `'threeVerticalDots'` **(default)** | {@icon @ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg Three vertical dots} | -| `'alignLeft'` | {@icon @ckeditor/ckeditor5-core/theme/icons/align-left.svg Align left} | -| `'bold'` | {@icon @ckeditor/ckeditor5-core/theme/icons/bold.svg Bold} | -| `'importExport'` | {@icon @ckeditor/ckeditor5-core/theme/icons/importexport.svg Import export} | -| `'paragraph'` | {@icon @ckeditor/ckeditor5-core/theme/icons/paragraph.svg Paragraph} | -| `'text'` | {@icon @ckeditor/ckeditor5-core/theme/icons/text.svg Text} | -| `'plus'` | {@icon @ckeditor/ckeditor5-core/theme/icons/plus.svg Plus} | -| `'dragIndicator'` | {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} | -| `'pilcrow'` | {@icon @ckeditor/ckeditor5-core/theme/icons/pilcrow.svg Pilcrow} | +| `'threeVerticalDots'` **(default)** | {@icon @ckeditor/ckeditor5-icons/theme/icons/three-vertical-dots.svg Three vertical dots} | +| `'alignLeft'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/align-left.svg Align left} | +| `'bold'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/bold.svg Bold} | +| `'importExport'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/import-export.svg Import export} | +| `'paragraph'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/paragraph.svg Paragraph} | +| `'text'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/text.svg Text} | +| `'plus'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/plus.svg Plus} | +| `'dragIndicator'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg Drag indicator} | +| `'pilcrow'` | {@icon @ckeditor/ckeditor5-icons/theme/icons/pilcrow.svg Pilcrow} | * The default icons are loaded from the `ckeditor5-core` package. * If no icon is specified, `'threeVerticalDots'` will be used as a default. @@ -333,7 +333,7 @@ The block toolbar provides an additional configurable toolbar on the left-hand s ### Demo - In the editor below, move the caret around the content. You will see that the block toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg drag indicator} is following your selection. Click the button to show the toolbar. + In the editor below, move the caret around the content. You will see that the block toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg drag indicator} is following your selection. Click the button to show the toolbar. {@snippet installation/setup/blocktoolbar} @@ -344,9 +344,9 @@ The block toolbar provides an additional configurable toolbar on the left-hand s ### Additional feature information -To access the block toolbar, you need to click the button with braille pattern dots icon {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg drag indicator} on the left-hand side of the content area (the gutter). The button appears next to the selected block element (for example, a paragraph), following the caret as the user edits the content and navigates the document. +To access the block toolbar, you need to click the button with braille pattern dots icon {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg drag indicator} on the left-hand side of the content area (the gutter). The button appears next to the selected block element (for example, a paragraph), following the caret as the user edits the content and navigates the document. -The icon {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg drag indicator} is also a handle to drag blocks of content around the editor. Click a heading in the demo above and drag it all the way down between the following paragraphs to see this functionality in action. +The icon {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg drag indicator} is also a handle to drag blocks of content around the editor. Click a heading in the demo above and drag it all the way down between the following paragraphs to see this functionality in action. The block toolbar complements the [balloon editor type](https://ckeditor.com/ckeditor-5/builder/?redirect=docs) where it falls short, for example when you must insert some content (like an image), but the selection is collapsed, so you cannot access the toolbar. It can, however, be added to any type of editor and configure accordingly (see below). @@ -418,7 +418,7 @@ If you plan to run the editor in a right–to–left (RTL) language, keep in min You can use the `shouldNotGroupWhenFull` [configuration option](#multiline-wrapping-toolbar) to prevent {@link module:core/editor/editorconfig~EditorConfig#toolbar automatic items grouping} in the block toolbar. -You can also change the current default toolbar icon `'dragIndicator'` {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} by choosing predefined icon from [icon list](#changing-the-icon) using the `icon` option or by passing a `SVG` string: +You can also change the current default toolbar icon `'dragIndicator'` {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg Drag indicator} by choosing predefined icon from [icon list](#changing-the-icon) using the `icon` option or by passing a `SVG` string: ```js blockToolbar: { diff --git a/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2.md b/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2.md index 518c94dac7e..30cc89fae9f 100644 --- a/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2.md +++ b/docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2.md @@ -112,7 +112,8 @@ import { LabeledFieldView, createLabeledInputText, ButtonView, // ADDED - icons // ADDED + IconCheck, // ADDED + IconCancel // ADDED } from 'ckeditor5'; export default class FormView extends View { @@ -122,14 +123,14 @@ export default class FormView extends View { // Create the save and cancel buttons. this.saveButtonView = this._createButton( - 'Save', icons.check, 'ck-button-save' + 'Save', IconCheck, 'ck-button-save' ); // Set the type to 'submit', which will trigger // the submit event on entire form when clicked. this.saveButtonView.type = 'submit'; this.cancelButtonView = this._createButton( - 'Cancel', icons.cancel, 'ck-button-cancel' + 'Cancel', IconCancel, 'ck-button-cancel' ); // Previously set template. @@ -176,11 +177,11 @@ export default class FormView extends View { // ... this.saveButtonView = this._createButton( - 'Save', icons.check, 'ck-button-save' + 'Save', IconCheck, 'ck-button-save' ); this.saveButtonView.type = 'submit'; this.cancelButtonView = this._createButton( - 'Cancel', icons.cancel, 'ck-button-cancel' + 'Cancel', IconCancel, 'ck-button-cancel' ); // Delegate ButtonView#execute to FormView#cancel. this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' ); diff --git a/docs/tutorials/supporting-multiple-versions.md b/docs/tutorials/supporting-multiple-versions.md index 8424f4af451..f2c17fe0c7f 100644 --- a/docs/tutorials/supporting-multiple-versions.md +++ b/docs/tutorials/supporting-multiple-versions.md @@ -74,7 +74,7 @@ If you want to support legacy versions of CKEditor 5, you cannot import fro import Table from '@ckeditor/ckeditor5-table/src/table'; // ❌ - import TableRowIcon from '@ckeditor/ckeditor5-table/theme/icons/table-row.svg'; + import TableRowIcon from '@ckeditor/ckeditor5-icons/theme/icons/table-row.svg'; ``` During the build process, these imports will be used as-is when generating the bundles for the legacy versions of CKEditor 5, but will be replaced with `ckeditor5` and `ckeditor5-premium-features` in the bundles for the latest version. diff --git a/docs/updating/nim-migration/custom-plugins.md b/docs/updating/nim-migration/custom-plugins.md index ef27b339a2a..33deddfb089 100644 --- a/docs/updating/nim-migration/custom-plugins.md +++ b/docs/updating/nim-migration/custom-plugins.md @@ -98,14 +98,14 @@ The same rule applies to the `theme` folder in the `@ckeditor/ckeditor5-*` packa ```js // ❌ -import undo from '@ckeditor/ckeditor5-core/theme/icons/undo.svg'; +import undo from '@ckeditor/ckeditor5-icons/theme/undo.svg'; console.log( undo ); // âś… -import { icons } from '@ckeditor/ckeditor5-core'; +import { IconUndo } from '@ckeditor/ckeditor5-icons'; -console.log( icons.undo ); +console.log( IconUndo ); ``` If you run the following command, the `ckeditor5-rules/allow-imports-only-from-main-package-entry-point` eslint rule will list all the places where you need to update the imports. diff --git a/docs/updating/nim-migration/migration-to-new-installation-methods.md b/docs/updating/nim-migration/migration-to-new-installation-methods.md index 17877286c89..e29f719cc31 100644 --- a/docs/updating/nim-migration/migration-to-new-installation-methods.md +++ b/docs/updating/nim-migration/migration-to-new-installation-methods.md @@ -39,7 +39,7 @@ module.exports = { module: { rules: [ { - test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + test: /ckeditor5-icons\/theme\/icons\/[^/\\]+\.svg$/, use: [ 'raw-loader' ] }, { diff --git a/docs/updating/update-to-40.md b/docs/updating/update-to-40.md index f4ca070fc8f..7e8d4b0e99b 100644 --- a/docs/updating/update-to-40.md +++ b/docs/updating/update-to-40.md @@ -84,7 +84,7 @@ ClassicEditor ### CKBox image editing -The new release includes the {@link features/ckbox CKBox} image editing feature. You can access this feature either through a main toolbar button or the image contextual toolbar button {@icon @ckeditor/ckeditor5-ckbox/theme/icons/ckbox-image-edit.svg Image upload}. It lets users perform quick image edits such as cropping, resizing, flipping, and rotating the image. Image editing is called from within the editor and the process takes place right in the asset manager. This speeds up and simplifies the content editing process. +The new release includes the {@link features/ckbox CKBox} image editing feature. You can access this feature either through a main toolbar button or the image contextual toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/ckbox-image-edit.svg Image upload}. It lets users perform quick image edits such as cropping, resizing, flipping, and rotating the image. Image editing is called from within the editor and the process takes place right in the asset manager. This speeds up and simplifies the content editing process. {@img assets/img/ckbox-editing-area.png 1062 CKBox image editing panel.} @@ -127,7 +127,7 @@ You can read more about image editing in the {@link @ckbox features/images/editi ### Expanded image insert dropdown -We have updated the toolbar `insertImage` component. By default, the image toolbar dropdown {@icon @ckeditor/ckeditor5-core/theme/icons/image.svg Image} provides access to all installed methods of inserting images into content: +We have updated the toolbar `insertImage` component. By default, the image toolbar dropdown {@icon @ckeditor/ckeditor5-icons/theme/icons/image.svg Image} provides access to all installed methods of inserting images into content: * {@link features/image-upload Uploading images from your computer}. * Adding images from {@link features/using-file-managers file managers}. @@ -190,14 +190,14 @@ Additional image inserting plugins: #### New image upload icons -Due to the changes to the image insert mechanisms, we introduced new toolbar icons and replaced the old {@icon @ckeditor/ckeditor5-core/theme/icons/image.svg Image} image icon. +Due to the changes to the image insert mechanisms, we introduced new toolbar icons and replaced the old {@icon @ckeditor/ckeditor5-icons/theme/icons/image.svg Image} image icon. Now there are: -* {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image upload} image upload icon that is the default for the dropdown or the upload from computer command. -* {@icon @ckeditor/ckeditor5-core/theme/icons/image-asset-manager.svg Image manager} image manager icon. -* {@icon @ckeditor/ckeditor5-core/theme/icons/image-url.svg Insert via URL} insert via URL icon. +* {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image upload} image upload icon that is the default for the dropdown or the upload from computer command. +* {@icon @ckeditor/ckeditor5-icons/theme/icons/image-asset-manager.svg Image manager} image manager icon. +* {@icon @ckeditor/ckeditor5-icons/theme/icons/image-url.svg Insert via URL} insert via URL icon. -The toolbar dropdown will use the {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image upload} image upload icon by default. If no upload adapter is present, the toolbar will use the next available icon instead. +The toolbar dropdown will use the {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image upload} image upload icon by default. If no upload adapter is present, the toolbar will use the next available icon instead. ### Removal of the `insertImageViaUrl` option @@ -244,7 +244,7 @@ If you omit the `type` setting in the configuration, the behavior defaults to in ### Updated image text alternative icon -The {@link features/images-text-alternative image text alternative} (the `alt` attribute) helps screen reader users navigate and understand the document. We have updated the toolbar icon {@icon @ckeditor/ckeditor5-core/theme/icons/text-alternative.svg Alternative text} to be more intuitive and easier to recognize, following global standards. +The {@link features/images-text-alternative image text alternative} (the `alt` attribute) helps screen reader users navigate and understand the document. We have updated the toolbar icon {@icon @ckeditor/ckeditor5-icons/theme/icons/text-alternative.svg Alternative text} to be more intuitive and easier to recognize, following global standards. ## Update to CKEditor 5 v40.0.0 diff --git a/package.json b/package.json index c9f6b77531e..fef2ce6693f 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@ckeditor/ckeditor5-horizontal-line": "44.1.0", "@ckeditor/ckeditor5-html-embed": "44.1.0", "@ckeditor/ckeditor5-html-support": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-image": "44.1.0", "@ckeditor/ckeditor5-indent": "44.1.0", "@ckeditor/ckeditor5-language": "44.1.0", diff --git a/packages/ckeditor5-alignment/ckeditor5-metadata.json b/packages/ckeditor5-alignment/ckeditor5-metadata.json index 2c559076b33..875808dd1db 100644 --- a/packages/ckeditor5-alignment/ckeditor5-metadata.json +++ b/packages/ckeditor5-alignment/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "SplitButton", "name": "alignment", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/align-left.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/align-left.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-alignment/docs/features/text-alignment.md b/packages/ckeditor5-alignment/docs/features/text-alignment.md index 77fcb9fe518..1a74fa7ac65 100644 --- a/packages/ckeditor5-alignment/docs/features/text-alignment.md +++ b/packages/ckeditor5-alignment/docs/features/text-alignment.md @@ -10,7 +10,7 @@ The alignment feature lets you align your content to the left or right as well a ## Demo -Click inside a paragraph or a header and use the toolbar dropdown {@icon @ckeditor/ckeditor5-core/theme/icons/align-right.svg Text alignment} to change the alignment of the element. +Click inside a paragraph or a header and use the toolbar dropdown {@icon @ckeditor/ckeditor5-icons/theme/icons/align-right.svg Text alignment} to change the alignment of the element. {@snippet features/text-alignment} diff --git a/packages/ckeditor5-alignment/package.json b/packages/ckeditor5-alignment/package.json index 4ba9e6680bd..e840677e8bf 100644 --- a/packages/ckeditor5-alignment/package.json +++ b/packages/ckeditor5-alignment/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "ckeditor5": "44.1.0" diff --git a/packages/ckeditor5-alignment/src/alignmentui.ts b/packages/ckeditor5-alignment/src/alignmentui.ts index e1a0f900550..cb21b86f3d1 100644 --- a/packages/ckeditor5-alignment/src/alignmentui.ts +++ b/packages/ckeditor5-alignment/src/alignmentui.ts @@ -7,7 +7,7 @@ * @module alignment/alignmentui */ -import { Plugin, icons } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; import { type Button, ButtonView, @@ -18,6 +18,7 @@ import { MenuBarMenuView, MenuBarMenuListView } from 'ckeditor5/src/ui.js'; +import { IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignRight } from 'ckeditor5/src/icons.js'; import type { Locale } from 'ckeditor5/src/utils.js'; import { isSupported, normalizeAlignmentOptions } from './utils.js'; @@ -25,10 +26,10 @@ import type { AlignmentFormat, SupportedOption } from './alignmentconfig.js'; import type AlignmentCommand from './alignmentcommand.js'; const iconsMap = /* #__PURE__ */ ( () => new Map( [ - [ 'left', icons.alignLeft ], - [ 'right', icons.alignRight ], - [ 'center', icons.alignCenter ], - [ 'justify', icons.alignJustify ] + [ 'left', IconAlignLeft ], + [ 'right', IconAlignRight ], + [ 'center', IconAlignCenter ], + [ 'justify', IconAlignJustify ] ] ) )(); /** diff --git a/packages/ckeditor5-alignment/tests/alignmentui.js b/packages/ckeditor5-alignment/tests/alignmentui.js index 2ddad7409a4..3c9b758d0d2 100644 --- a/packages/ckeditor5-alignment/tests/alignmentui.js +++ b/packages/ckeditor5-alignment/tests/alignmentui.js @@ -5,12 +5,11 @@ /* global document */ +import { IconAlignLeft, IconAlignRight } from 'ckeditor5/src/icons.js'; + import AlignmentEditing from '../src/alignmentediting.js'; import AlignmentUI from '../src/alignmentui.js'; -import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/align-left.svg'; -import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/align-right.svg'; - import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; describe( 'Alignment UI', () => { @@ -327,11 +326,11 @@ describe( 'Alignment UI', () => { // Trigger toolbar view creation (lazy init). dropdown.isOpen = true; - expect( dropdown.buttonView.icon ).to.equal( alignLeftIcon ); + expect( dropdown.buttonView.icon ).to.equal( IconAlignLeft ); command.value = 'right'; - expect( dropdown.buttonView.icon ).to.equal( alignRightIcon ); + expect( dropdown.buttonView.icon ).to.equal( IconAlignRight ); } ); it( 'should be disabled if command is not enabled', () => { @@ -428,7 +427,7 @@ describe( 'Alignment UI', () => { it( 'should have default icon set (LTR content)', () => { command.value = undefined; - expect( dropdown.buttonView.icon ).to.equal( alignLeftIcon ); + expect( dropdown.buttonView.icon ).to.equal( IconAlignLeft ); } ); it( 'should have default icon set (RTL content)', async () => { @@ -447,7 +446,7 @@ describe( 'Alignment UI', () => { dropdown = newEditor.ui.componentFactory.create( 'alignment' ); editor.commands.get( 'alignment' ).value = undefined; - expect( dropdown.buttonView.icon ).to.equal( alignRightIcon ); + expect( dropdown.buttonView.icon ).to.equal( IconAlignRight ); return newEditor.destroy(); } ); diff --git a/packages/ckeditor5-basic-styles/ckeditor5-metadata.json b/packages/ckeditor5-basic-styles/ckeditor5-metadata.json index 91308e78f17..f6273bee5b3 100644 --- a/packages/ckeditor5-basic-styles/ckeditor5-metadata.json +++ b/packages/ckeditor5-basic-styles/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "bold", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/bold.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/bold.svg" } ], "htmlOutput": [ @@ -29,7 +29,7 @@ { "type": "Button", "name": "code", - "iconPath": "theme/icons/code.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/code.svg" } ], "htmlOutput": [ @@ -48,7 +48,7 @@ { "type": "Button", "name": "italic", - "iconPath": "theme/icons/italic.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/italic.svg" } ], "htmlOutput": [ @@ -67,7 +67,7 @@ { "type": "Button", "name": "strikethrough", - "iconPath": "theme/icons/strikethrough.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/strikethrough.svg" } ], "htmlOutput": [ @@ -86,7 +86,7 @@ { "type": "Button", "name": "subscript", - "iconPath": "theme/icons/subscript.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/subscript.svg" } ], "htmlOutput": [ @@ -105,7 +105,7 @@ { "type": "Button", "name": "superscript", - "iconPath": "theme/icons/superscript.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/superscript.svg" } ], "htmlOutput": [ @@ -124,7 +124,7 @@ { "type": "Button", "name": "underline", - "iconPath": "theme/icons/underline.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/underline.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-basic-styles/docs/features/basic-styles.md b/packages/ckeditor5-basic-styles/docs/features/basic-styles.md index e9658c4423b..363e4367de2 100644 --- a/packages/ckeditor5-basic-styles/docs/features/basic-styles.md +++ b/packages/ckeditor5-basic-styles/docs/features/basic-styles.md @@ -12,10 +12,10 @@ The basic styles feature lets you apply the most essential formatting such as bo You may apply basic formatting options with toolbar buttons. You can also make use of the {@link features/autoformat autoformatting feature} that changes Markdown code to formatted text as you type. Use one of these to format text: -* Bold – Use the bold toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/bold.svg Bold} or type `**text**` or `__text__`. -* Italic – Use the italic toolbar button {@icon @ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg Italic} or type `*text*` or `_text_`. -* Code – Use the code toolbar button {@icon @ckeditor/ckeditor5-basic-styles/theme/icons/code.svg Code} or type ``` `text` ```. -* Strikethrough – Use the strikethrough toolbar button {@icon @ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg Strikethrough} or type `~~text~~`. +* Bold – Use the bold toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/bold.svg Bold} or type `**text**` or `__text__`. +* Italic – Use the italic toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/italic.svg Italic} or type `*text*` or `_text_`. +* Code – Use the code toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/code.svg Code} or type ``` `text` ```. +* Strikethrough – Use the strikethrough toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/strikethrough.svg Strikethrough} or type `~~text~~`. {@snippet features/basic-styles} diff --git a/packages/ckeditor5-basic-styles/package.json b/packages/ckeditor5-basic-styles/package.json index e509f6ea070..ed2522a1a67 100644 --- a/packages/ckeditor5-basic-styles/package.json +++ b/packages/ckeditor5-basic-styles/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-typing": "44.1.0", "@ckeditor/ckeditor5-ui": "44.1.0", "ckeditor5": "44.1.0" diff --git a/packages/ckeditor5-basic-styles/src/bold/boldui.ts b/packages/ckeditor5-basic-styles/src/bold/boldui.ts index d15e9d92809..ad1ab3bb31f 100644 --- a/packages/ckeditor5-basic-styles/src/bold/boldui.ts +++ b/packages/ckeditor5-basic-styles/src/bold/boldui.ts @@ -7,7 +7,8 @@ * @module basic-styles/bold/boldui */ -import { Plugin, icons } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; +import { IconBold } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; @@ -41,7 +42,7 @@ export default class BoldUI extends Plugin { editor, commandName: BOLD, plugin: this, - icon: icons.bold, + icon: IconBold, label: t( 'Bold' ), keystroke: 'CTRL+B' } ); diff --git a/packages/ckeditor5-basic-styles/src/code/codeui.ts b/packages/ckeditor5-basic-styles/src/code/codeui.ts index fadcd456e09..b554533e219 100644 --- a/packages/ckeditor5-basic-styles/src/code/codeui.ts +++ b/packages/ckeditor5-basic-styles/src/code/codeui.ts @@ -8,11 +8,10 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconCode } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; -import codeIcon from '../../theme/icons/code.svg'; - import '../../theme/code.css'; const CODE = 'code'; @@ -45,7 +44,7 @@ export default class CodeUI extends Plugin { editor, commandName: CODE, plugin: this, - icon: codeIcon, + icon: IconCode, label: t( 'Code' ) } ); diff --git a/packages/ckeditor5-basic-styles/src/italic/italicui.ts b/packages/ckeditor5-basic-styles/src/italic/italicui.ts index 2d7b31f1180..d410159614e 100644 --- a/packages/ckeditor5-basic-styles/src/italic/italicui.ts +++ b/packages/ckeditor5-basic-styles/src/italic/italicui.ts @@ -8,11 +8,10 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconItalic } from 'ckeditor5/src/icons.js'; import { MenuBarMenuListItemButtonView, ButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; -import italicIcon from '../../theme/icons/italic.svg'; - const ITALIC = 'italic'; /** @@ -43,7 +42,7 @@ export default class ItalicUI extends Plugin { editor, commandName: ITALIC, plugin: this, - icon: italicIcon, + icon: IconItalic, keystroke: 'CTRL+I', label: t( 'Italic' ) } ); diff --git a/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts b/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts index 74ff6ae0d7f..900cf80c279 100644 --- a/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts +++ b/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts @@ -8,11 +8,10 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconStrikethrough } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; -import strikethroughIcon from '../../theme/icons/strikethrough.svg'; - const STRIKETHROUGH = 'strikethrough'; /** @@ -43,7 +42,7 @@ export default class StrikethroughUI extends Plugin { editor, commandName: STRIKETHROUGH, plugin: this, - icon: strikethroughIcon, + icon: IconStrikethrough, keystroke: 'CTRL+SHIFT+X', label: t( 'Strikethrough' ) } ); diff --git a/packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts b/packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts index b118327588c..67cf35538a9 100644 --- a/packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts +++ b/packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts @@ -8,11 +8,10 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconSubscript } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; -import subscriptIcon from '../../theme/icons/subscript.svg'; - const SUBSCRIPT = 'subscript'; /** @@ -44,7 +43,7 @@ export default class SubscriptUI extends Plugin { editor, commandName: SUBSCRIPT, plugin: this, - icon: subscriptIcon, + icon: IconSubscript, label: t( 'Subscript' ) } ); diff --git a/packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts b/packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts index 09a812b167f..97755fa0c5c 100644 --- a/packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts +++ b/packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts @@ -8,11 +8,10 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconSuperscript } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; -import superscriptIcon from '../../theme/icons/superscript.svg'; - const SUPERSCRIPT = 'superscript'; /** @@ -43,7 +42,7 @@ export default class SuperscriptUI extends Plugin { editor, commandName: SUPERSCRIPT, plugin: this, - icon: superscriptIcon, + icon: IconSuperscript, label: t( 'Superscript' ) } ); diff --git a/packages/ckeditor5-basic-styles/src/underline/underlineui.ts b/packages/ckeditor5-basic-styles/src/underline/underlineui.ts index df543215d38..b999cd68644 100644 --- a/packages/ckeditor5-basic-styles/src/underline/underlineui.ts +++ b/packages/ckeditor5-basic-styles/src/underline/underlineui.ts @@ -8,11 +8,10 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconUnderline } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { getButtonCreator } from '../utils.js'; -import underlineIcon from '../../theme/icons/underline.svg'; - const UNDERLINE = 'underline'; /** @@ -43,7 +42,7 @@ export default class UnderlineUI extends Plugin { editor, commandName: UNDERLINE, plugin: this, - icon: underlineIcon, + icon: IconUnderline, label: t( 'Underline' ), keystroke: 'CTRL+U' } ); diff --git a/packages/ckeditor5-block-quote/ckeditor5-metadata.json b/packages/ckeditor5-block-quote/ckeditor5-metadata.json index 6668d465909..eedda4aefa8 100644 --- a/packages/ckeditor5-block-quote/ckeditor5-metadata.json +++ b/packages/ckeditor5-block-quote/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "blockQuote", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/quote.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/quote.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-block-quote/docs/features/block-quote.md b/packages/ckeditor5-block-quote/docs/features/block-quote.md index 8a597451de9..c8fc7aee12a 100644 --- a/packages/ckeditor5-block-quote/docs/features/block-quote.md +++ b/packages/ckeditor5-block-quote/docs/features/block-quote.md @@ -11,7 +11,7 @@ The block quote feature lets you easily include block quotations or pull quotes ## Demo -Use the block quote toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/quote.svg Insert block quote} in the editor below to see the feature in action. You can also type `>` followed by a space before the quotation to format it on the go thanks to the {@link features/autoformat autoformatting} feature. +Use the block quote toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/quote.svg Insert block quote} in the editor below to see the feature in action. You can also type `>` followed by a space before the quotation to format it on the go thanks to the {@link features/autoformat autoformatting} feature. {@snippet features/block-quote} diff --git a/packages/ckeditor5-block-quote/package.json b/packages/ckeditor5-block-quote/package.json index 0c441b8ee03..b1e71a513bf 100644 --- a/packages/ckeditor5-block-quote/package.json +++ b/packages/ckeditor5-block-quote/package.json @@ -15,6 +15,7 @@ "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", "@ckeditor/ckeditor5-enter": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-typing": "44.1.0", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", diff --git a/packages/ckeditor5-block-quote/src/blockquoteui.ts b/packages/ckeditor5-block-quote/src/blockquoteui.ts index d2f72b6bb77..e22a6fa4f3a 100644 --- a/packages/ckeditor5-block-quote/src/blockquoteui.ts +++ b/packages/ckeditor5-block-quote/src/blockquoteui.ts @@ -7,7 +7,8 @@ * @module block-quote/blockquoteui */ -import { Plugin, icons } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; +import { IconQuote } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import '../theme/blockquote.css'; @@ -73,7 +74,7 @@ export default class BlockQuoteUI extends Plugin { view.set( { label: t( 'Block quote' ), - icon: icons.quote, + icon: IconQuote, isToggleable: true } ); diff --git a/packages/ckeditor5-bookmark/ckeditor5-metadata.json b/packages/ckeditor5-bookmark/ckeditor5-metadata.json index 89b1e5aabc9..30731a9eba4 100644 --- a/packages/ckeditor5-bookmark/ckeditor5-metadata.json +++ b/packages/ckeditor5-bookmark/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "bookmark", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/bookmark.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/bookmark.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-bookmark/docs/features/bookmarks.md b/packages/ckeditor5-bookmark/docs/features/bookmarks.md index 3393bd56b30..53465713b20 100644 --- a/packages/ckeditor5-bookmark/docs/features/bookmarks.md +++ b/packages/ckeditor5-bookmark/docs/features/bookmarks.md @@ -12,9 +12,9 @@ The bookmarks feature allows for adding and managing the bookmarks anchors attac ## Demo -Use the bookmark toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/bookmark.svg Add bookmark} in the editor below to see the feature in action. Or use the "Insert" command from the menu bar to add a bookmark. Add a unique name to identify the bookmark (for example, `Rights`). +Use the bookmark toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/bookmark.svg Add bookmark} in the editor below to see the feature in action. Or use the "Insert" command from the menu bar to add a bookmark. Add a unique name to identify the bookmark (for example, `Rights`). -To use the bookmark as an anchor in the content, add a link {@icon @ckeditor/ckeditor5-link/theme/icons/link.svg Add link} and put the bookmark name as target. In the example below it would be `#Rights`. You can change the bookmark's name or remove it by clicking the bookmark icon inside the content. A contextual bookmark toolbar will pop up. +To use the bookmark as an anchor in the content, add a link {@icon @ckeditor/ckeditor5-icons/theme/icons/link.svg Add link} and put the bookmark name as target. In the example below it would be `#Rights`. You can change the bookmark's name or remove it by clicking the bookmark icon inside the content. A contextual bookmark toolbar will pop up. The Bookmarks feature is production-ready but does not include integration with the linking experience yet (see [#17230](https://github.com/ckeditor/ckeditor5/issues/17230)). diff --git a/packages/ckeditor5-bookmark/package.json b/packages/ckeditor5-bookmark/package.json index 8046056bb3f..9d1b81c3f0f 100644 --- a/packages/ckeditor5-bookmark/package.json +++ b/packages/ckeditor5-bookmark/package.json @@ -16,6 +16,7 @@ "ckeditor5": "44.1.0", "@ckeditor/ckeditor5-core": "44.1.0", "@ckeditor/ckeditor5-engine": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-widget": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "@ckeditor/ckeditor5-ui": "44.1.0" diff --git a/packages/ckeditor5-bookmark/src/bookmarkediting.ts b/packages/ckeditor5-bookmark/src/bookmarkediting.ts index 0950cfaecc6..5b181aababc 100644 --- a/packages/ckeditor5-bookmark/src/bookmarkediting.ts +++ b/packages/ckeditor5-bookmark/src/bookmarkediting.ts @@ -7,9 +7,10 @@ * @module bookmark/bookmarkediting */ -import { type Editor, Plugin, icons } from 'ckeditor5/src/core.js'; +import { type Editor, Plugin } from 'ckeditor5/src/core.js'; import { toWidget } from 'ckeditor5/src/widget.js'; import { IconView } from 'ckeditor5/src/ui.js'; +import { IconBookmarkInline } from 'ckeditor5/src/icons.js'; import type { EventInfo } from 'ckeditor5/src/utils.js'; import type { @@ -160,7 +161,7 @@ export default class BookmarkEditing extends Plugin { const icon = new IconView(); icon.set( { - content: icons.bookmarkInline, + content: IconBookmarkInline, isColorInherited: false } ); diff --git a/packages/ckeditor5-bookmark/src/bookmarkui.ts b/packages/ckeditor5-bookmark/src/bookmarkui.ts index d7c6838535b..4d071a23ff2 100644 --- a/packages/ckeditor5-bookmark/src/bookmarkui.ts +++ b/packages/ckeditor5-bookmark/src/bookmarkui.ts @@ -7,7 +7,7 @@ * @module bookmark/bookmarkui */ -import { Plugin, type Editor, icons } from 'ckeditor5/src/core.js'; +import { Plugin, type Editor } from 'ckeditor5/src/core.js'; import { ButtonView, ContextualBalloon, @@ -16,7 +16,7 @@ import { clickOutsideHandler, type ViewWithCssTransitionDisabler } from 'ckeditor5/src/ui.js'; - +import { IconBookmark } from 'ckeditor5/src/icons.js'; import { ClickObserver, type ViewDocumentClickEvent, @@ -273,7 +273,7 @@ export default class BookmarkUI extends Plugin { view.set( { label: t( 'Bookmark' ), - icon: icons.bookmark + icon: IconBookmark } ); // Execute the command. diff --git a/packages/ckeditor5-bookmark/src/ui/bookmarkactionsview.ts b/packages/ckeditor5-bookmark/src/ui/bookmarkactionsview.ts index 6675edbbe39..1711d4b57f6 100644 --- a/packages/ckeditor5-bookmark/src/ui/bookmarkactionsview.ts +++ b/packages/ckeditor5-bookmark/src/ui/bookmarkactionsview.ts @@ -22,8 +22,7 @@ import { type LocaleTranslate, type Locale } from 'ckeditor5/src/utils.js'; - -import { icons } from 'ckeditor5/src/core.js'; +import { IconPencil, IconRemove } from 'ckeditor5/src/icons.js'; // eslint-disable-next-line ckeditor5-rules/ckeditor-imports import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css'; @@ -87,8 +86,8 @@ export default class BookmarkActionsView extends View { const t = locale.t; this.bookmarkPreviewView = this._createBookmarkPreviewView(); - this.removeButtonView = this._createButton( t( 'Remove bookmark' ), icons.remove, 'remove', this.bookmarkPreviewView ); - this.editButtonView = this._createButton( t( 'Edit bookmark' ), icons.pencil, 'edit', this.bookmarkPreviewView ); + this.removeButtonView = this._createButton( t( 'Remove bookmark' ), IconRemove, 'remove', this.bookmarkPreviewView ); + this.editButtonView = this._createButton( t( 'Edit bookmark' ), IconPencil, 'edit', this.bookmarkPreviewView ); this.set( 'id', undefined ); diff --git a/packages/ckeditor5-bookmark/tests/bookmarkui.js b/packages/ckeditor5-bookmark/tests/bookmarkui.js index ccc06f7345b..7291ee2f7f4 100644 --- a/packages/ckeditor5-bookmark/tests/bookmarkui.js +++ b/packages/ckeditor5-bookmark/tests/bookmarkui.js @@ -11,7 +11,7 @@ import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; import { View, ButtonView, ContextualBalloon, MenuBarMenuListItemButtonView } from '@ckeditor/ckeditor5-ui'; -import { icons } from '@ckeditor/ckeditor5-core'; +import { IconBookmark } from '@ckeditor/ckeditor5-icons'; import { ClickObserver } from '@ckeditor/ckeditor5-engine'; import { indexOf, isRange, keyCodes } from '@ckeditor/ckeditor5-utils'; import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js'; @@ -23,8 +23,6 @@ import BookmarkActionsView from '../src/ui/bookmarkactionsview.js'; import BookmarkEditing from '../src/bookmarkediting.js'; import BookmarkUI from '../src/bookmarkui.js'; -const bookmarkIcon = icons.bookmark; - describe( 'BookmarkUI', () => { let editor, element, button, balloon, bookmarkUIFeature, formView, actionsView; @@ -92,7 +90,7 @@ describe( 'BookmarkUI', () => { } ); it( 'should have an icon', () => { - expect( button.icon ).to.equal( bookmarkIcon ); + expect( button.icon ).to.equal( IconBookmark ); } ); it( 'should bind #isEnabled to insert and update command', () => { diff --git a/packages/ckeditor5-ckbox/ckeditor5-metadata.json b/packages/ckeditor5-ckbox/ckeditor5-metadata.json index 6393996625b..e4e37cd4078 100644 --- a/packages/ckeditor5-ckbox/ckeditor5-metadata.json +++ b/packages/ckeditor5-ckbox/ckeditor5-metadata.json @@ -20,7 +20,7 @@ { "name": "ckbox", "type": "Button", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/browse-files.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/browse-files.svg" } ], "htmlOutput": [ @@ -50,7 +50,7 @@ { "name": "ckboxImageEdit", "type": "Button", - "iconPath": "theme/icons/ckbox-image-edit.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/ckbox-image-edit.svg" } ] } diff --git a/packages/ckeditor5-ckbox/docs/features/ckbox.md b/packages/ckeditor5-ckbox/docs/features/ckbox.md index c84437e27ee..5fa682b8288 100644 --- a/packages/ckeditor5-ckbox/docs/features/ckbox.md +++ b/packages/ckeditor5-ckbox/docs/features/ckbox.md @@ -34,9 +34,9 @@ To find out more about CKBox, the brand-new file manager and image editor, visit ## Demo -To upload a file using CKBox, use the open file manager toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/browse-files.svg Open file manager}. You can choose more than one file at a time. Use the edit image button {@icon @ckeditor/ckeditor5-ckbox/theme/icons/ckbox-image-edit.svg} from either the main toolbar or the image contextual toolbar to edit the selected image. +To upload a file using CKBox, use the open file manager toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/browse-files.svg Open file manager}. You can choose more than one file at a time. Use the edit image button {@icon @ckeditor/ckeditor5-icons/theme/icons/ckbox-image-edit.svg} from either the main toolbar or the image contextual toolbar to edit the selected image. -Note that the image toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image upload} will now also upload images right into the CKBox file manager and you can {@link features/drag-drop drag and drop} them, too. You can then access the files from the management panel. +Note that the image toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image upload} will now also upload images right into the CKBox file manager and you can {@link features/drag-drop drag and drop} them, too. You can then access the files from the management panel. {@snippet features/ckbox} @@ -170,7 +170,7 @@ If you define your own upload category mappings for a particular image type, onl The [CKBox workspaces](https://ckeditor.com/docs/ckbox/latest/features/file-management/workspaces.html) provide a convenient solution for achieving data isolation and user separation within CKBox. With workspaces, you can easily create separate storage and data spaces, giving you precise control over assigning specific users, user groups, or tenants to each workspace. -If the user is assigned to more than one workspace, by default all the files uploaded directly from CKEditor are located in the first workspace in the list of workspaces allowed in the user's JWT token. This corresponds to uploads through drag and drop into the editor area, pasting images from the clipboard, or images uploaded using the Image {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image} feature. If you would like to define a specific workspace for files uploaded this way, you can define its ID in the `defaultUploadWorkspaceId` option. After that, all the files uploaded directly from CKEditor will be placed in the specified workspace. +If the user is assigned to more than one workspace, by default all the files uploaded directly from CKEditor are located in the first workspace in the list of workspaces allowed in the user's JWT token. This corresponds to uploads through drag and drop into the editor area, pasting images from the clipboard, or images uploaded using the Image {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image} feature. If you would like to define a specific workspace for files uploaded this way, you can define its ID in the `defaultUploadWorkspaceId` option. After that, all the files uploaded directly from CKEditor will be placed in the specified workspace. ```js ClassicEditor diff --git a/packages/ckeditor5-ckbox/package.json b/packages/ckeditor5-ckbox/package.json index 2a2b45e0d19..d5e4cc5345f 100644 --- a/packages/ckeditor5-ckbox/package.json +++ b/packages/ckeditor5-ckbox/package.json @@ -15,6 +15,7 @@ "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", "@ckeditor/ckeditor5-engine": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-upload": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", diff --git a/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditui.ts b/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditui.ts index bb82e2a3831..0458526463c 100644 --- a/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditui.ts +++ b/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditui.ts @@ -9,8 +9,7 @@ import { Plugin } from 'ckeditor5/src/core.js'; import { ButtonView } from 'ckeditor5/src/ui.js'; - -import ckboxImageEditIcon from '../../theme/icons/ckbox-image-edit.svg'; +import { IconCkboxImageEdit } from 'ckeditor5/src/icons.js'; /** * The UI plugin of the CKBox image edit feature. @@ -46,7 +45,7 @@ export default class CKBoxImageEditUI extends Plugin { const t = locale.t; view.set( { - icon: ckboxImageEditIcon, + icon: IconCkboxImageEdit, tooltip: true } ); diff --git a/packages/ckeditor5-ckbox/src/ckboxui.ts b/packages/ckeditor5-ckbox/src/ckboxui.ts index a40e44e5de8..6cf0ee11ace 100644 --- a/packages/ckeditor5-ckbox/src/ckboxui.ts +++ b/packages/ckeditor5-ckbox/src/ckboxui.ts @@ -7,8 +7,9 @@ * @module ckbox/ckboxui */ -import { icons, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; +import { IconBrowseFiles, IconImageAssetManager } from 'ckeditor5/src/icons.js'; import type { ImageInsertUI } from '@ckeditor/ckeditor5-image'; @@ -88,7 +89,7 @@ export default class CKBoxUI extends Plugin { const t = this.editor.locale.t; const button = this._createButton( ButtonView ); - button.icon = icons.browseFiles; + button.icon = IconBrowseFiles; button.label = t( 'Open file manager' ); button.tooltip = true; @@ -104,7 +105,7 @@ export default class CKBoxUI extends Plugin { const button = this._createButton( ButtonView ); - button.icon = icons.imageAssetManager; + button.icon = IconImageAssetManager; button.bind( 'label' ).to( imageInsertUI, 'isImageSelected', @@ -124,7 +125,7 @@ export default class CKBoxUI extends Plugin { const button = this._createButton( ButtonView ); - button.icon = icons.imageAssetManager; + button.icon = IconImageAssetManager; button.withText = true; button.bind( 'label' ).to( imageInsertUI, @@ -146,7 +147,7 @@ export default class CKBoxUI extends Plugin { const t = this.editor.locale.t; const button = this._createButton( MenuBarMenuListItemButtonView ); - button.icon = icons.browseFiles; + button.icon = IconBrowseFiles; button.withText = true; button.label = t( 'File' ); @@ -162,7 +163,7 @@ export default class CKBoxUI extends Plugin { const t = this.editor.locale.t; const button = this._createButton( MenuBarMenuListItemButtonView ); - button.icon = icons.imageAssetManager; + button.icon = IconImageAssetManager; button.withText = true; switch ( type ) { diff --git a/packages/ckeditor5-ckbox/tests/ckboxui.js b/packages/ckeditor5-ckbox/tests/ckboxui.js index c4408a3af4f..79205b12335 100644 --- a/packages/ckeditor5-ckbox/tests/ckboxui.js +++ b/packages/ckeditor5-ckbox/tests/ckboxui.js @@ -18,7 +18,7 @@ import CloudServicesCoreMock from './_utils/cloudservicescoremock.js'; import ImageInsertUI from '@ckeditor/ckeditor5-image/src/imageinsert/imageinsertui.js'; import Model from '@ckeditor/ckeditor5-ui/src/model.js'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils.js'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconImageAssetManager, IconBrowseFiles } from 'ckeditor5/src/icons.js'; import CKBoxUI from '../src/ckboxui.js'; import CKBoxEditing from '../src/ckboxediting.js'; @@ -142,7 +142,7 @@ describe( 'CKBoxUI', () => { expect( dropdownButton ).to.be.instanceOf( ButtonView ); expect( dropdownButton.withText ).to.be.false; - expect( dropdownButton.icon ).to.equal( icons.imageAssetManager ); + expect( dropdownButton.icon ).to.equal( IconImageAssetManager ); expect( dropdownButton.label ).to.equal( 'Insert image with file manager' ); } ); @@ -158,7 +158,7 @@ describe( 'CKBoxUI', () => { expect( buttonView ).to.be.instanceOf( ButtonView ); expect( buttonView.withText ).to.be.true; - expect( buttonView.icon ).to.equal( icons.imageAssetManager ); + expect( buttonView.icon ).to.equal( IconImageAssetManager ); expect( buttonView.label ).to.equal( 'Insert with file manager' ); } ); @@ -170,7 +170,7 @@ describe( 'CKBoxUI', () => { expect( buttonView ).to.be.instanceOf( MenuBarMenuListItemButtonView ); expect( buttonView.withText ).to.be.true; - expect( buttonView.icon ).to.equal( icons.imageAssetManager ); + expect( buttonView.icon ).to.equal( IconImageAssetManager ); expect( buttonView.label ).to.equal( 'With file manager' ); } ); @@ -179,7 +179,7 @@ describe( 'CKBoxUI', () => { expect( buttonView ).to.be.instanceOf( MenuBarMenuListItemButtonView ); expect( buttonView.withText ).to.be.true; - expect( buttonView.icon ).to.equal( icons.imageAssetManager ); + expect( buttonView.icon ).to.equal( IconImageAssetManager ); expect( buttonView.label ).to.equal( 'Image' ); } ); @@ -249,7 +249,7 @@ describe( 'CKBoxUI', () => { } ); it( 'should set an #icon of the #buttonView', () => { - expect( button.icon ).to.equal( icons.browseFiles ); + expect( button.icon ).to.equal( IconBrowseFiles ); } ); it( 'should execute the command afer firing the event', () => { diff --git a/packages/ckeditor5-ckfinder/ckeditor5-metadata.json b/packages/ckeditor5-ckfinder/ckeditor5-metadata.json index a02486318fb..56c3daebbc4 100644 --- a/packages/ckeditor5-ckfinder/ckeditor5-metadata.json +++ b/packages/ckeditor5-ckfinder/ckeditor5-metadata.json @@ -18,7 +18,7 @@ { "name": "CKFinder", "type": "Button", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/browse-files.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/browse-files.svg" } ] } diff --git a/packages/ckeditor5-ckfinder/docs/features/ckfinder.md b/packages/ckeditor5-ckfinder/docs/features/ckfinder.md index f9b77d47357..8c21d8d7336 100644 --- a/packages/ckeditor5-ckfinder/docs/features/ckfinder.md +++ b/packages/ckeditor5-ckfinder/docs/features/ckfinder.md @@ -24,7 +24,7 @@ The CKFinder feature lets you insert images and links to files into your content This demo shows the integration where the file manager's server connector handles [image upload](#configuring-the-image-upload-only) only: * Paste an image directly into the editor. It will be automatically uploaded using the server-side connector. -* Use the insert image button {@icon @ckeditor/ckeditor5-core/theme/icons/image-upload.svg Image} in the toolbar to insert an image. +* Use the insert image button {@icon @ckeditor/ckeditor5-icons/theme/icons/image-upload.svg Image} in the toolbar to insert an image. {@snippet features/ckfinder-upload-only} @@ -33,7 +33,7 @@ This demo shows the integration where the file manager's server connector handle This demo shows the [full integration](#configuring-the-full-integration) with the CKFinder file uploader: * Paste an image directly into the editor. It will be automatically uploaded using the server-side connector. -* Use the insert image or file button {@icon @ckeditor/ckeditor5-core/theme/icons/browse-files.svg Browse files} in the toolbar to open the CKFinder file manager. Then insert an image or a link to any other file. +* Use the insert image or file button {@icon @ckeditor/ckeditor5-icons/theme/icons/browse-files.svg Browse files} in the toolbar to open the CKFinder file manager. Then insert an image or a link to any other file. {@snippet features/ckfinder} diff --git a/packages/ckeditor5-ckfinder/package.json b/packages/ckeditor5-ckfinder/package.json index e48cff6244c..a9171e7dffd 100644 --- a/packages/ckeditor5-ckfinder/package.json +++ b/packages/ckeditor5-ckfinder/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "ckeditor5": "44.1.0" diff --git a/packages/ckeditor5-ckfinder/src/ckfinderui.ts b/packages/ckeditor5-ckfinder/src/ckfinderui.ts index de8cf369f78..1de9673d8f1 100644 --- a/packages/ckeditor5-ckfinder/src/ckfinderui.ts +++ b/packages/ckeditor5-ckfinder/src/ckfinderui.ts @@ -7,8 +7,9 @@ * @module ckfinder/ckfinderui */ -import { icons, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; +import { IconBrowseFiles, IconImageAssetManager } from 'ckeditor5/src/icons.js'; import type { ImageInsertUI } from '@ckeditor/ckeditor5-image'; import type CKFinderCommand from './ckfindercommand.js'; @@ -84,7 +85,7 @@ export default class CKFinderUI extends Plugin { const t = this.editor.locale.t; const button = this._createButton( ButtonView ); - button.icon = icons.browseFiles; + button.icon = IconBrowseFiles; button.label = t( 'Insert image or file' ); button.tooltip = true; @@ -100,7 +101,7 @@ export default class CKFinderUI extends Plugin { const button = this._createButton( ButtonView ); - button.icon = icons.imageAssetManager; + button.icon = IconImageAssetManager; button.bind( 'label' ).to( imageInsertUI, 'isImageSelected', @@ -120,7 +121,7 @@ export default class CKFinderUI extends Plugin { const button = this._createButton( ButtonView ); - button.icon = icons.imageAssetManager; + button.icon = IconImageAssetManager; button.withText = true; button.bind( 'label' ).to( imageInsertUI, @@ -142,7 +143,7 @@ export default class CKFinderUI extends Plugin { const t = this.editor.locale.t; const button = this._createButton( MenuBarMenuListItemButtonView ); - button.icon = icons.browseFiles; + button.icon = IconBrowseFiles; button.withText = true; button.label = t( 'File' ); @@ -158,7 +159,7 @@ export default class CKFinderUI extends Plugin { const t = this.editor.locale.t; const button = this._createButton( MenuBarMenuListItemButtonView ); - button.icon = icons.imageAssetManager; + button.icon = IconImageAssetManager; button.withText = true; switch ( type ) { diff --git a/packages/ckeditor5-ckfinder/tests/ckfinderui.js b/packages/ckeditor5-ckfinder/tests/ckfinderui.js index ebb76d085fe..9d7efa88259 100644 --- a/packages/ckeditor5-ckfinder/tests/ckfinderui.js +++ b/packages/ckeditor5-ckfinder/tests/ckfinderui.js @@ -11,7 +11,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global.js'; import Image from '@ckeditor/ckeditor5-image/src/image.js'; import Link from '@ckeditor/ckeditor5-link/src/link.js'; import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconImageAssetManager, IconBrowseFiles } from 'ckeditor5/src/icons.js'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview.js'; import MenuBarMenuListItemButtonView from '@ckeditor/ckeditor5-ui/src/menubar/menubarmenulistitembuttonview.js'; @@ -90,7 +90,7 @@ describe( 'CKFinderUI', () => { expect( dropdownButton ).to.be.instanceOf( ButtonView ); expect( dropdownButton.withText ).to.be.false; - expect( dropdownButton.icon ).to.equal( icons.imageAssetManager ); + expect( dropdownButton.icon ).to.equal( IconImageAssetManager ); expect( dropdownButton.label ).to.equal( 'Insert image with file manager' ); } ); @@ -106,7 +106,7 @@ describe( 'CKFinderUI', () => { expect( buttonView ).to.be.instanceOf( ButtonView ); expect( buttonView.withText ).to.be.true; - expect( buttonView.icon ).to.equal( icons.imageAssetManager ); + expect( buttonView.icon ).to.equal( IconImageAssetManager ); expect( buttonView.label ).to.equal( 'Insert with file manager' ); } ); @@ -118,7 +118,7 @@ describe( 'CKFinderUI', () => { expect( buttonView ).to.be.instanceOf( MenuBarMenuListItemButtonView ); expect( buttonView.withText ).to.be.true; - expect( buttonView.icon ).to.equal( icons.imageAssetManager ); + expect( buttonView.icon ).to.equal( IconImageAssetManager ); expect( buttonView.label ).to.equal( 'With file manager' ); } ); @@ -127,7 +127,7 @@ describe( 'CKFinderUI', () => { expect( buttonView ).to.be.instanceOf( MenuBarMenuListItemButtonView ); expect( buttonView.withText ).to.be.true; - expect( buttonView.icon ).to.equal( icons.imageAssetManager ); + expect( buttonView.icon ).to.equal( IconImageAssetManager ); expect( buttonView.label ).to.equal( 'Image' ); } ); @@ -187,7 +187,7 @@ describe( 'CKFinderUI', () => { } ); it( 'should set an #icon of the #buttonView', () => { - expect( button.icon ).to.equal( icons.browseFiles ); + expect( button.icon ).to.equal( IconBrowseFiles ); } ); it( 'should execute bold command on model execute event', () => { diff --git a/packages/ckeditor5-clipboard/docs/features/drag-drop.md b/packages/ckeditor5-clipboard/docs/features/drag-drop.md index ca1dba78b67..4dfc308a580 100644 --- a/packages/ckeditor5-clipboard/docs/features/drag-drop.md +++ b/packages/ckeditor5-clipboard/docs/features/drag-drop.md @@ -37,7 +37,7 @@ The drag and drop functions include: * Selection of the text, elements, multiple blocks, and moving these around. * Placement of blocks inside other blocks such as tables, blockquotes, etc. -* The braille dots panel icon {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} in the [balloon block editor](#balloon-block-editor-demo) now behaves as a drag handle. +* The braille dots panel icon {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg Drag indicator} in the [balloon block editor](#balloon-block-editor-demo) now behaves as a drag handle. ### Classic editor demo @@ -47,7 +47,7 @@ Select a block or blocks, and drag them across the document. You can place block ### Balloon block editor demo -In the balloon block editor, you can also drag content blocks using the drag handle. Select or focus on the block, and then drag the block with the braille dots panel icon {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator}. +In the balloon block editor, you can also drag content blocks using the drag handle. Select or focus on the block, and then drag the block with the braille dots panel icon {@icon @ckeditor/ckeditor5-icons/theme/icons/drag-indicator.svg Drag indicator}. {@snippet features/block-balloon-drag-drop} diff --git a/packages/ckeditor5-code-block/ckeditor5-metadata.json b/packages/ckeditor5-code-block/ckeditor5-metadata.json index 8a3b2989f49..a43d57f0923 100644 --- a/packages/ckeditor5-code-block/ckeditor5-metadata.json +++ b/packages/ckeditor5-code-block/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "codeBlock", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/codeblock.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/code-block.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-code-block/docs/features/code-blocks.md b/packages/ckeditor5-code-block/docs/features/code-blocks.md index d2abbf45c2e..7c28c948a0d 100644 --- a/packages/ckeditor5-code-block/docs/features/code-blocks.md +++ b/packages/ckeditor5-code-block/docs/features/code-blocks.md @@ -11,7 +11,7 @@ The code block feature lets you insert and edit blocks of pre-formatted code. It ## Demo -Use the code block toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/codeblock.svg Insert code block} and the type dropdown to insert a desired code block. Alternatively, start a line with `` ``` ``, and the {@link features/autoformat autoformatting feature} will format it as a code block. To add a paragraph under a code block, simply press Enter three times. +Use the code block toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/code-block.svg Insert code block} and the type dropdown to insert a desired code block. Alternatively, start a line with `` ``` ``, and the {@link features/autoformat autoformatting feature} will format it as a code block. To add a paragraph under a code block, simply press Enter three times. {@snippet features/code-block} diff --git a/packages/ckeditor5-code-block/package.json b/packages/ckeditor5-code-block/package.json index 1bcb045ff3f..389ac7501a2 100644 --- a/packages/ckeditor5-code-block/package.json +++ b/packages/ckeditor5-code-block/package.json @@ -17,6 +17,7 @@ "@ckeditor/ckeditor5-clipboard": "44.1.0", "@ckeditor/ckeditor5-engine": "44.1.0", "@ckeditor/ckeditor5-enter": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "ckeditor5": "44.1.0" diff --git a/packages/ckeditor5-code-block/src/codeblockui.ts b/packages/ckeditor5-code-block/src/codeblockui.ts index a8485995ef3..605e80b0db0 100644 --- a/packages/ckeditor5-code-block/src/codeblockui.ts +++ b/packages/ckeditor5-code-block/src/codeblockui.ts @@ -7,7 +7,7 @@ * @module code-block/codeblockui */ -import { icons, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; import { Collection } from 'ckeditor5/src/utils.js'; import { ViewModel, @@ -20,6 +20,7 @@ import { MenuBarMenuListItemView, type ListDropdownButtonDefinition } from 'ckeditor5/src/ui.js'; +import { IconCodeBlock } from 'ckeditor5/src/icons.js'; import { getNormalizedAndLocalizedLanguageDefinitions } from './utils.js'; @@ -67,7 +68,7 @@ export default class CodeBlockUI extends Plugin { splitButtonView.set( { label: accessibleLabel, tooltip: true, - icon: icons.codeBlock, + icon: IconCodeBlock, isToggleable: true } ); @@ -107,7 +108,7 @@ export default class CodeBlockUI extends Plugin { menuView.buttonView.set( { role: 'menuitem', label: t( 'Code block' ), - icon: icons.codeBlock + icon: IconCodeBlock } ); menuView.bind( 'isEnabled' ).to( command ); diff --git a/packages/ckeditor5-code-block/tests/codeblockui.js b/packages/ckeditor5-code-block/tests/codeblockui.js index f8e25bc84b6..795400b35f0 100644 --- a/packages/ckeditor5-code-block/tests/codeblockui.js +++ b/packages/ckeditor5-code-block/tests/codeblockui.js @@ -8,7 +8,7 @@ import CodeBlockEditing from '../src/codeblockediting.js'; import CodeBlockUI from '../src/codeblockui.js'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconCodeBlock } from 'ckeditor5/src/icons.js'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service.js'; @@ -83,7 +83,7 @@ describe( 'CodeBlockUI', () => { it( 'has the base properties', () => { expect( button ).to.have.property( 'label', 'Insert code block' ); - expect( button ).to.have.property( 'icon', icons.codeBlock ); + expect( button ).to.have.property( 'icon', IconCodeBlock ); expect( button ).to.have.property( 'tooltip', true ); expect( button ).to.have.property( 'isToggleable', true ); } ); diff --git a/packages/ckeditor5-core/package.json b/packages/ckeditor5-core/package.json index c8ada44ecc2..bacd369f9c2 100644 --- a/packages/ckeditor5-core/package.json +++ b/packages/ckeditor5-core/package.json @@ -62,7 +62,6 @@ "lang", "src/**/*.js", "src/**/*.d.ts", - "theme", "ckeditor5-metadata.json", "CHANGELOG.md" ], diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts index a726c298123..0f51f2eb5f5 100644 --- a/packages/ckeditor5-core/src/index.ts +++ b/packages/ckeditor5-core/src/index.ts @@ -42,171 +42,4 @@ export type { KeystrokeInfoDefinition as KeystrokeInfoDefinition } from './accessibility.js'; -import cancel from './../theme/icons/cancel.svg'; -import caption from './../theme/icons/caption.svg'; -import check from './../theme/icons/check.svg'; -import cog from './../theme/icons/cog.svg'; -import colorPalette from './../theme/icons/color-palette.svg'; -import eraser from './../theme/icons/eraser.svg'; -import history from './../theme/icons/history.svg'; -import lowVision from './../theme/icons/low-vision.svg'; -import textAlternative from './../theme/icons/text-alternative.svg'; -import loupe from './../theme/icons/loupe.svg'; -import previousArrow from './../theme/icons/previous-arrow.svg'; -import nextArrow from './../theme/icons/next-arrow.svg'; -import image from './../theme/icons/image.svg'; -import imageUpload from './../theme/icons/image-upload.svg'; -import imageAssetManager from './../theme/icons/image-asset-manager.svg'; -import imageUrl from './../theme/icons/image-url.svg'; - -import alignBottom from './../theme/icons/align-bottom.svg'; -import alignMiddle from './../theme/icons/align-middle.svg'; -import alignTop from './../theme/icons/align-top.svg'; -import alignLeft from './../theme/icons/align-left.svg'; -import alignCenter from './../theme/icons/align-center.svg'; -import alignRight from './../theme/icons/align-right.svg'; -import alignJustify from './../theme/icons/align-justify.svg'; - -import objectBlockLeft from './../theme/icons/object-left.svg'; -import objectCenter from './../theme/icons/object-center.svg'; -import objectBlockRight from './../theme/icons/object-right.svg'; -import objectFullWidth from './../theme/icons/object-full-width.svg'; -import objectInline from './../theme/icons/object-inline.svg'; -import objectLeft from './../theme/icons/object-inline-left.svg'; -import objectRight from './../theme/icons/object-inline-right.svg'; - -import objectSizeFull from './../theme/icons/object-size-full.svg'; -import objectSizeCustom from './../theme/icons/object-size-custom.svg'; -import objectSizeLarge from './../theme/icons/object-size-large.svg'; -import objectSizeSmall from './../theme/icons/object-size-small.svg'; -import objectSizeMedium from './../theme/icons/object-size-medium.svg'; - -import pencil from './../theme/icons/pencil.svg'; -import pilcrow from './../theme/icons/pilcrow.svg'; -import quote from './../theme/icons/quote.svg'; -import threeVerticalDots from './../theme/icons/three-vertical-dots.svg'; -import dragIndicator from './../theme/icons/drag-indicator.svg'; - -import bold from './../theme/icons/bold.svg'; -import paragraph from './../theme/icons/paragraph.svg'; -import plus from './../theme/icons/plus.svg'; -import text from './../theme/icons/text.svg'; -import importExport from './../theme/icons/importexport.svg'; - -import redo from './../theme/icons/redo.svg'; -import undo from './../theme/icons/undo.svg'; - -import bulletedList from './../theme/icons/bulletedlist.svg'; -import numberedList from './../theme/icons/numberedlist.svg'; -import todoList from './../theme/icons/todolist.svg'; - -import codeBlock from './../theme/icons/codeblock.svg'; - -import browseFiles from './../theme/icons/browse-files.svg'; - -import heading1 from './../theme/icons/heading1.svg'; -import heading2 from './../theme/icons/heading2.svg'; -import heading3 from './../theme/icons/heading3.svg'; -import heading4 from './../theme/icons/heading4.svg'; -import heading5 from './../theme/icons/heading5.svg'; -import heading6 from './../theme/icons/heading6.svg'; - -import horizontalLine from './../theme/icons/horizontalline.svg'; - -import html from './../theme/icons/html.svg'; - -import indent from './../theme/icons/indent.svg'; -import outdent from './../theme/icons/outdent.svg'; - -import table from './../theme/icons/table.svg'; - -import remove from './../theme/icons/remove.svg'; - -import bookmark from './../theme/icons/bookmark.svg'; -import bookmarkInline from './../theme/icons/bookmark_inline.svg'; - -export const icons = { - bold, - cancel, - caption, - check, - cog, - colorPalette, - eraser, - history, - image, - imageUpload, - imageAssetManager, - imageUrl, - lowVision, - textAlternative, - loupe, - previousArrow, - nextArrow, - importExport, - paragraph, - plus, - text, - - alignBottom, - alignMiddle, - alignTop, - alignLeft, - alignCenter, - alignRight, - alignJustify, - - objectLeft, - objectCenter, - objectRight, - objectFullWidth, - objectInline, - objectBlockLeft, - objectBlockRight, - - objectSizeCustom, - objectSizeFull, - objectSizeLarge, - objectSizeSmall, - objectSizeMedium, - - pencil, - pilcrow, - quote, - threeVerticalDots, - dragIndicator, - - redo, - undo, - - bulletedList, - numberedList, - todoList, - - codeBlock, - - browseFiles, - - heading1, - heading2, - heading3, - heading4, - heading5, - heading6, - - horizontalLine, - - html, - - indent, - outdent, - - table, - - remove, - - bookmark, - bookmarkInline -}; - import './augmentation.js'; diff --git a/packages/ckeditor5-find-and-replace/ckeditor5-metadata.json b/packages/ckeditor5-find-and-replace/ckeditor5-metadata.json index be6623eb4bb..0d11fef8368 100644 --- a/packages/ckeditor5-find-and-replace/ckeditor5-metadata.json +++ b/packages/ckeditor5-find-and-replace/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "findAndReplace", - "iconPath": "theme/icons/find-replace.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/find-replace.svg" } ] } diff --git a/packages/ckeditor5-find-and-replace/docs/features/find-and-replace.md b/packages/ckeditor5-find-and-replace/docs/features/find-and-replace.md index 6ddc232f4fe..eceae761465 100644 --- a/packages/ckeditor5-find-and-replace/docs/features/find-and-replace.md +++ b/packages/ckeditor5-find-and-replace/docs/features/find-and-replace.md @@ -11,7 +11,7 @@ The find and replace feature lets you find and replace any text in your document ## Demo -Use the find and replace toolbar button {@icon @ckeditor/ckeditor5-find-and-replace/theme/icons/find-replace.svg Find and replace} to open the search dialog. Use it to find and replace words or phrases. You can also use the Ctrl/Cmd+F keyboard shortcut. Try replacing "AI" with "artificial intelligence" to make the content appeal to less tech-savvy users. Be careful to match the case! +Use the find and replace toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/find-replace.svg Find and replace} to open the search dialog. Use it to find and replace words or phrases. You can also use the Ctrl/Cmd+F keyboard shortcut. Try replacing "AI" with "artificial intelligence" to make the content appeal to less tech-savvy users. Be careful to match the case! {@snippet features/find-and-replace} diff --git a/packages/ckeditor5-find-and-replace/package.json b/packages/ckeditor5-find-and-replace/package.json index d63d6561f6a..f82c0d16bb4 100644 --- a/packages/ckeditor5-find-and-replace/package.json +++ b/packages/ckeditor5-find-and-replace/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "ckeditor5": "44.1.0", diff --git a/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts b/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts index 7d0a7a21199..3f0d842ed77 100644 --- a/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts +++ b/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts @@ -7,7 +7,8 @@ * @module find-and-replace/findandreplaceui */ -import { type Editor, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin, type Editor } from 'ckeditor5/src/core.js'; +import { IconFindReplace } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView, @@ -20,7 +21,6 @@ import { type ViewWithCssTransitionDisabler } from 'ckeditor5/src/ui.js'; import FindAndReplaceFormView from './ui/findandreplaceformview.js'; -import loupeIcon from '../theme/icons/find-replace.svg'; import type FindAndReplaceEditing from './findandreplaceediting.js'; import type FindNextCommand from './findnextcommand.js'; import type FindPreviousCommand from './findpreviouscommand.js'; @@ -176,7 +176,7 @@ export default class FindAndReplaceUI extends Plugin { }, { priority: 'low' } ); dropdownView.buttonView.set( { - icon: loupeIcon, + icon: IconFindReplace, label: t( 'Find and replace' ), keystroke: 'CTRL+F', tooltip: true @@ -257,7 +257,7 @@ export default class FindAndReplaceUI extends Plugin { buttonView.bind( 'isEnabled' ).to( findCommand ); buttonView.set( { - icon: loupeIcon, + icon: IconFindReplace, label: t( 'Find and replace' ), keystroke: 'CTRL+F' } ); diff --git a/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.ts b/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.ts index 31fa11fd5a9..c52480c47ee 100644 --- a/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.ts +++ b/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.ts @@ -36,7 +36,7 @@ import { // eslint-disable-next-line ckeditor5-rules/ckeditor-imports import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css'; import '../../theme/findandreplaceform.css'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconPreviousArrow } from 'ckeditor5/src/icons.js'; /** * The find and replace form view class. @@ -257,7 +257,7 @@ export default class FindAndReplaceFormView extends View { this._findPrevButtonView = this._createButton( { label: t( 'Previous result' ), class: 'ck-button-prev', - icon: icons.previousArrow, + icon: IconPreviousArrow, keystroke: 'Shift+F3', tooltip: true } ); @@ -265,7 +265,7 @@ export default class FindAndReplaceFormView extends View { this._findNextButtonView = this._createButton( { label: t( 'Next result' ), class: 'ck-button-next', - icon: icons.previousArrow, + icon: IconPreviousArrow, keystroke: 'F3', tooltip: true } ); diff --git a/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js b/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js index b5447fb645f..5f51c6a670c 100644 --- a/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js +++ b/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js @@ -3,6 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ +import { IconFindReplace } from 'ckeditor5/src/icons.js'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview.js'; @@ -15,7 +16,6 @@ import MenuBarMenuListItemButtonView from '@ckeditor/ckeditor5-ui/src/menubar/me import DialogView from '@ckeditor/ckeditor5-ui/src/dialog/dialogview.js'; import FindAndReplaceUI from '../src/findandreplaceui.js'; import FindAndReplace from '../src/findandreplace.js'; -import loupeIcon from '../theme/icons/find-replace.svg'; import FindAndReplaceFormView from '../src/ui/findandreplaceformview.js'; /* global window */ @@ -236,7 +236,7 @@ describe( 'FindAndReplaceUI', () => { } ); it( 'should set an #icon of the #buttonView', () => { - expect( button.icon ).to.equal( loupeIcon ); + expect( button.icon ).to.equal( IconFindReplace ); } ); it( 'should set a #label of the #buttonView', () => { @@ -629,7 +629,7 @@ describe( 'FindAndReplaceUI', () => { describe( 'button', () => { it( 'should set an #icon of the #buttonView', () => { - expect( dropdown.buttonView.icon ).to.equal( loupeIcon ); + expect( dropdown.buttonView.icon ).to.equal( IconFindReplace ); } ); it( 'should set a #label of the #buttonView', () => { diff --git a/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js b/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js index 3a7c2523135..5b9dfd63b27 100644 --- a/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js +++ b/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js @@ -26,7 +26,7 @@ import FindAndReplace from '../../src/findandreplace.js'; import FindAndReplaceFormView from '../../src/ui/findandreplaceformview.js'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils.js'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconPreviousArrow } from 'ckeditor5/src/icons.js'; describe( 'FindAndReplaceFormView', () => { let view; @@ -135,7 +135,7 @@ describe( 'FindAndReplaceFormView', () => { } ); it( 'should have an icon', () => { - expect( view._findPrevButtonView.icon ).to.equal( icons.previousArrow ); + expect( view._findPrevButtonView.icon ).to.equal( IconPreviousArrow ); } ); it( 'should have a tooltip', () => { @@ -157,7 +157,7 @@ describe( 'FindAndReplaceFormView', () => { } ); it( 'should have an icon', () => { - expect( view._findNextButtonView.icon ).to.equal( icons.previousArrow ); + expect( view._findNextButtonView.icon ).to.equal( IconPreviousArrow ); } ); it( 'should have a tooltip', () => { diff --git a/packages/ckeditor5-font/ckeditor5-metadata.json b/packages/ckeditor5-font/ckeditor5-metadata.json index fae9f8f69fb..8fb894a2b20 100644 --- a/packages/ckeditor5-font/ckeditor5-metadata.json +++ b/packages/ckeditor5-font/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "SplitButton", "name": "fontBackgroundColor", - "iconPath": "theme/icons/font-background.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/font-background.svg" } ], "htmlOutput": [ @@ -30,7 +30,7 @@ { "type": "SplitButton", "name": "fontColor", - "iconPath": "theme/icons/font-color.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/font-color.svg" } ], "htmlOutput": [ @@ -50,7 +50,7 @@ { "type": "SplitButton", "name": "fontSize", - "iconPath": "theme/icons/font-size.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/font-size.svg" } ], "htmlOutput": [ @@ -89,7 +89,7 @@ { "type": "SplitButton", "name": "fontFamily", - "iconPath": "theme/icons/font-family.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/font-family.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-font/docs/features/font.md b/packages/ckeditor5-font/docs/features/font.md index 55435bcb402..35dd3ab65b4 100644 --- a/packages/ckeditor5-font/docs/features/font.md +++ b/packages/ckeditor5-font/docs/features/font.md @@ -10,7 +10,7 @@ The font feature lets you change font family, size, and color (including backgro ## Demo -Use the toolbar dropdowns in the demo below to control the font size {@icon @ckeditor/ckeditor5-font/theme/icons/font-size.svg Font size} and font family {@icon @ckeditor/ckeditor5-font/theme/icons/font-family.svg Font family}. You can also change both the font color {@icon @ckeditor/ckeditor5-font/theme/icons/font-color.svg Font color} and the font background color {@icon @ckeditor/ckeditor5-font/theme/icons/font-background.svg Font background color} with predefined palette or color picker {@icon @ckeditor/ckeditor5-core/theme/icons/color-palette.svg Color picker}. +Use the toolbar dropdowns in the demo below to control the font size {@icon @ckeditor/ckeditor5-icons/theme/icons/font-size.svg Font size} and font family {@icon @ckeditor/ckeditor5-icons/theme/icons/font-family.svg Font family}. You can also change both the font color {@icon @ckeditor/ckeditor5-icons/theme/icons/font-color.svg Font color} and the font background color {@icon @ckeditor/ckeditor5-icons/theme/icons/font-background.svg Font background color} with predefined palette or color picker {@icon @ckeditor/ckeditor5-icons/theme/icons/color-palette.svg Color picker}. {@snippet features/font} diff --git a/packages/ckeditor5-font/package.json b/packages/ckeditor5-font/package.json index 74a8ec7defb..4a482d76147 100644 --- a/packages/ckeditor5-font/package.json +++ b/packages/ckeditor5-font/package.json @@ -15,6 +15,7 @@ "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", "@ckeditor/ckeditor5-engine": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "ckeditor5": "44.1.0" diff --git a/packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.ts b/packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.ts index 3410069edd9..38c8cfd5a1c 100644 --- a/packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.ts +++ b/packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.ts @@ -7,12 +7,11 @@ * @module font/fontbackgroundcolor/fontbackgroundcolorui */ +import { IconFontBackground } from 'ckeditor5/src/icons.js'; import ColorUI from '../ui/colorui.js'; import { FONT_BACKGROUND_COLOR } from '../utils.js'; import type { Editor } from 'ckeditor5/src/core.js'; -import fontBackgroundColorIcon from '../../theme/icons/font-background.svg'; - /** * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown. */ @@ -26,7 +25,7 @@ export default class FontBackgroundColorUI extends ColorUI { super( editor, { commandName: FONT_BACKGROUND_COLOR, componentName: FONT_BACKGROUND_COLOR, - icon: fontBackgroundColorIcon, + icon: IconFontBackground, dropdownLabel: t( 'Font Background Color' ) } ); } diff --git a/packages/ckeditor5-font/src/fontcolor/fontcolorui.ts b/packages/ckeditor5-font/src/fontcolor/fontcolorui.ts index e46ffb99099..5365e3c1bc2 100644 --- a/packages/ckeditor5-font/src/fontcolor/fontcolorui.ts +++ b/packages/ckeditor5-font/src/fontcolor/fontcolorui.ts @@ -7,12 +7,11 @@ * @module font/fontcolor/fontcolorui */ +import { IconFontColor } from 'ckeditor5/src/icons.js'; import ColorUI from '../ui/colorui.js'; import { FONT_COLOR } from '../utils.js'; import type { Editor } from 'ckeditor5/src/core.js'; -import fontColorIcon from '../../theme/icons/font-color.svg'; - /** * The font color UI plugin. It introduces the `'fontColor'` dropdown. */ @@ -26,7 +25,7 @@ export default class FontColorUI extends ColorUI { super( editor, { commandName: FONT_COLOR, componentName: FONT_COLOR, - icon: fontColorIcon, + icon: IconFontColor, dropdownLabel: t( 'Font Color' ) } ); } diff --git a/packages/ckeditor5-font/src/fontfamily/fontfamilyui.ts b/packages/ckeditor5-font/src/fontfamily/fontfamilyui.ts index fbddaed618d..ba03b40e7fa 100644 --- a/packages/ckeditor5-font/src/fontfamily/fontfamilyui.ts +++ b/packages/ckeditor5-font/src/fontfamily/fontfamilyui.ts @@ -9,6 +9,7 @@ import { Plugin } from 'ckeditor5/src/core.js'; import { Collection } from 'ckeditor5/src/utils.js'; +import { IconFontFamily } from 'ckeditor5/src/icons.js'; import { ViewModel, createDropdown, @@ -26,8 +27,6 @@ import { FONT_FAMILY } from '../utils.js'; import type { FontFamilyOption } from '../fontconfig.js'; import type FontFamilyCommand from './fontfamilycommand.js'; -import fontFamilyIcon from '../../theme/icons/font-family.svg'; - /** * The font family UI plugin. It introduces the `'fontFamily'` dropdown. */ @@ -70,7 +69,7 @@ export default class FontFamilyUI extends Plugin { dropdownView.buttonView.set( { label: accessibleLabel, - icon: fontFamilyIcon, + icon: IconFontFamily, tooltip: true } ); @@ -96,7 +95,7 @@ export default class FontFamilyUI extends Plugin { menuView.buttonView.set( { label: accessibleLabel, - icon: fontFamilyIcon + icon: IconFontFamily } ); menuView.bind( 'isEnabled' ).to( command ); diff --git a/packages/ckeditor5-font/src/fontsize/fontsizeui.ts b/packages/ckeditor5-font/src/fontsize/fontsizeui.ts index 32a6f91623c..21c145e9056 100644 --- a/packages/ckeditor5-font/src/fontsize/fontsizeui.ts +++ b/packages/ckeditor5-font/src/fontsize/fontsizeui.ts @@ -8,6 +8,7 @@ */ import { Plugin } from 'ckeditor5/src/core.js'; +import { IconFontSize } from 'ckeditor5/src/icons.js'; import { ViewModel, createDropdown, @@ -27,8 +28,6 @@ import '../../theme/fontsize.css'; import type { FontSizeOption } from '../fontconfig.js'; import type FontSizeCommand from './fontsizecommand.js'; -import fontSizeIcon from '../../theme/icons/font-size.svg'; - /** * The font size UI plugin. It introduces the `'fontSize'` dropdown. */ @@ -73,7 +72,7 @@ export default class FontSizeUI extends Plugin { // Create dropdown model. dropdownView.buttonView.set( { label: accessibleLabel, - icon: fontSizeIcon, + icon: IconFontSize, tooltip: true } ); @@ -101,7 +100,7 @@ export default class FontSizeUI extends Plugin { menuView.buttonView.set( { label: accessibleLabel, - icon: fontSizeIcon + icon: IconFontSize } ); menuView.bind( 'isEnabled' ).to( command ); diff --git a/packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js b/packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js index e0e4d382643..cfd7daa6b5f 100644 --- a/packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js +++ b/packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js @@ -5,11 +5,11 @@ /* global document */ +import { IconFontBackground } from 'ckeditor5/src/icons.js'; import FontBackgroundColorEditing from './../../src/fontbackgroundcolor/fontbackgroundcolorediting.js'; import FontBackgroundColorUI from './../../src/fontbackgroundcolor/fontbackgroundcolorui.js'; import ColorUI from './../../src/ui/colorui.js'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; -import fontBackgroundColorIcon from '../../theme/icons/font-background.svg'; describe( 'FontBckgroundColorUI', () => { let element, editor; @@ -42,7 +42,7 @@ describe( 'FontBckgroundColorUI', () => { expect( fontBackgroundColorUIPlugin.commandName ).to.equal( 'fontBackgroundColor' ); expect( fontBackgroundColorUIPlugin.componentName ).to.equal( 'fontBackgroundColor' ); - expect( fontBackgroundColorUIPlugin.icon ).to.equal( fontBackgroundColorIcon ); + expect( fontBackgroundColorUIPlugin.icon ).to.equal( IconFontBackground ); expect( fontBackgroundColorUIPlugin.dropdownLabel ).to.equal( 'Font Background Color' ); expect( fontBackgroundColorUIPlugin.columns ).to.equal( 5 ); } ); diff --git a/packages/ckeditor5-font/tests/fontcolor/fontcolorui.js b/packages/ckeditor5-font/tests/fontcolor/fontcolorui.js index b5398775595..cb60e0ac86d 100644 --- a/packages/ckeditor5-font/tests/fontcolor/fontcolorui.js +++ b/packages/ckeditor5-font/tests/fontcolor/fontcolorui.js @@ -5,11 +5,11 @@ /* global document */ +import { IconFontColor } from 'ckeditor5/src/icons.js'; import FontColorEditing from './../../src/fontcolor/fontcolorediting.js'; import FontColorUI from './../../src/fontcolor/fontcolorui.js'; import ColorUI from './../../src/ui/colorui.js'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; -import fontColorIcon from '../../theme/icons/font-color.svg'; describe( 'FontColorUI', () => { let element, editor; @@ -42,7 +42,7 @@ describe( 'FontColorUI', () => { expect( fontColorUIPlugin.commandName ).to.equal( 'fontColor' ); expect( fontColorUIPlugin.componentName ).to.equal( 'fontColor' ); - expect( fontColorUIPlugin.icon ).to.equal( fontColorIcon ); + expect( fontColorUIPlugin.icon ).to.equal( IconFontColor ); expect( fontColorUIPlugin.dropdownLabel ).to.equal( 'Font Color' ); expect( fontColorUIPlugin.columns ).to.equal( 5 ); } ); diff --git a/packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js b/packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js index 1eab86930e7..ef09039697d 100644 --- a/packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js +++ b/packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js @@ -5,11 +5,10 @@ /* global document */ +import { IconFontFamily } from 'ckeditor5/src/icons.js'; import FontFamilyEditing from '../../src/fontfamily/fontfamilyediting.js'; import FontFamilyUI from '../../src/fontfamily/fontfamilyui.js'; -import fontFamilyIcon from '../../theme/icons/font-family.svg'; - import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils.js'; @@ -77,7 +76,7 @@ describe( 'FontFamilyUI', () => { expect( button ).to.have.property( 'label', 'Font Family' ); expect( button ).to.have.property( 'tooltip', true ); - expect( button ).to.have.property( 'icon', fontFamilyIcon ); + expect( button ).to.have.property( 'icon', IconFontFamily ); } ); it( 'should add custom CSS class to dropdown', () => { @@ -288,7 +287,7 @@ describe( 'FontFamilyUI', () => { const button = subMenu.buttonView; expect( button ).to.have.property( 'label', 'Font Family' ); - expect( button ).to.have.property( 'icon', fontFamilyIcon ); + expect( button ).to.have.property( 'icon', IconFontFamily ); } ); it( 'button has binding to isEnabled', () => { diff --git a/packages/ckeditor5-font/tests/fontsize/fontsizeui.js b/packages/ckeditor5-font/tests/fontsize/fontsizeui.js index 4b5162f015e..6caaeaff16c 100644 --- a/packages/ckeditor5-font/tests/fontsize/fontsizeui.js +++ b/packages/ckeditor5-font/tests/fontsize/fontsizeui.js @@ -5,11 +5,10 @@ /* global document */ +import { IconFontSize } from 'ckeditor5/src/icons.js'; import FontSizeEditing from '../../src/fontsize/fontsizeediting.js'; import FontSizeUI from '../../src/fontsize/fontsizeui.js'; -import fontSizeIcon from '../../theme/icons/font-size.svg'; - import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils.js'; import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service.js'; @@ -84,7 +83,7 @@ describe( 'FontSizeUI', () => { expect( button ).to.have.property( 'label', 'Font Size' ); expect( button ).to.have.property( 'tooltip', true ); - expect( button ).to.have.property( 'icon', fontSizeIcon ); + expect( button ).to.have.property( 'icon', IconFontSize ); } ); it( 'should add custom CSS class to dropdown', () => { @@ -327,7 +326,7 @@ describe( 'FontSizeUI', () => { const button = subMenu.buttonView; expect( button ).to.have.property( 'label', 'Font Size' ); - expect( button ).to.have.property( 'icon', fontSizeIcon ); + expect( button ).to.have.property( 'icon', IconFontSize ); } ); it( 'button has binding to isEnabled', () => { diff --git a/packages/ckeditor5-heading/package.json b/packages/ckeditor5-heading/package.json index ff3f46f8aa2..f6d31053671 100644 --- a/packages/ckeditor5-heading/package.json +++ b/packages/ckeditor5-heading/package.json @@ -15,6 +15,7 @@ "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", "@ckeditor/ckeditor5-engine": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-paragraph": "44.1.0", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", diff --git a/packages/ckeditor5-heading/src/headingbuttonsui.ts b/packages/ckeditor5-heading/src/headingbuttonsui.ts index 845a340fb52..7e9e4f60e58 100644 --- a/packages/ckeditor5-heading/src/headingbuttonsui.ts +++ b/packages/ckeditor5-heading/src/headingbuttonsui.ts @@ -7,20 +7,21 @@ * @module heading/headingbuttonsui */ -import { icons, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; import { ButtonView } from 'ckeditor5/src/ui.js'; +import { IconHeading1, IconHeading2, IconHeading3, IconHeading4, IconHeading5, IconHeading6 } from 'ckeditor5/src/icons.js'; import { getLocalizedOptions } from './utils.js'; import type { HeadingOption } from './headingconfig.js'; import type HeadingCommand from './headingcommand.js'; const defaultIcons: Record = /* #__PURE__ */ ( () => ( { - heading1: icons.heading1, - heading2: icons.heading2, - heading3: icons.heading3, - heading4: icons.heading4, - heading5: icons.heading5, - heading6: icons.heading6 + heading1: IconHeading1, + heading2: IconHeading2, + heading3: IconHeading3, + heading4: IconHeading4, + heading5: IconHeading5, + heading6: IconHeading6 } ) )(); /** diff --git a/packages/ckeditor5-heading/tests/headingbuttonsui.js b/packages/ckeditor5-heading/tests/headingbuttonsui.js index 00e9d5c7050..ecf4bd440af 100644 --- a/packages/ckeditor5-heading/tests/headingbuttonsui.js +++ b/packages/ckeditor5-heading/tests/headingbuttonsui.js @@ -5,7 +5,7 @@ /* globals document */ -import { icons } from 'ckeditor5/src/core.js'; +import { IconHeading2 } from 'ckeditor5/src/icons.js'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; import HeadingEditing from '../src/headingediting.js'; import HeadingButtonsUI from '../src/headingbuttonsui.js'; @@ -67,7 +67,7 @@ describe( 'HeadingButtonUI', () => { const heading2Button = editor.ui.componentFactory.create( 'heading2' ); expect( heading2Button.label ).to.equal( localizedOptions.title ); - expect( heading2Button.icon ).to.equal( icons.heading2 ); + expect( heading2Button.icon ).to.equal( IconHeading2 ); expect( heading2Button.tooltip ).to.equal( true ); } ); diff --git a/packages/ckeditor5-highlight/ckeditor5-metadata.json b/packages/ckeditor5-highlight/ckeditor5-metadata.json index c88a1e4ed0e..32a9d32d0af 100644 --- a/packages/ckeditor5-highlight/ckeditor5-metadata.json +++ b/packages/ckeditor5-highlight/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "SplitButton", "name": "highlight", - "iconPath": "theme/icons/pen.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/pen.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-highlight/docs/features/highlight.md b/packages/ckeditor5-highlight/docs/features/highlight.md index 1e91a46e3fa..0b0d3a97b0e 100644 --- a/packages/ckeditor5-highlight/docs/features/highlight.md +++ b/packages/ckeditor5-highlight/docs/features/highlight.md @@ -11,7 +11,7 @@ The highlight feature lets you mark text fragments with different colors. You ca ## Demo -Select the text you want to highlight. Then use the highlight toolbar button {@icon @ckeditor/ckeditor5-highlight/theme/icons/marker.svg Highlight} to choose a desired color from the dropdown. +Select the text you want to highlight. Then use the highlight toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/marker.svg Highlight} to choose a desired color from the dropdown. {@snippet features/highlight} diff --git a/packages/ckeditor5-highlight/package.json b/packages/ckeditor5-highlight/package.json index 16cf988fc1c..66e98556cc4 100644 --- a/packages/ckeditor5-highlight/package.json +++ b/packages/ckeditor5-highlight/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "ckeditor5": "44.1.0" }, diff --git a/packages/ckeditor5-highlight/src/highlightui.ts b/packages/ckeditor5-highlight/src/highlightui.ts index 08ba1c1bf06..5c6e21ecd6a 100644 --- a/packages/ckeditor5-highlight/src/highlightui.ts +++ b/packages/ckeditor5-highlight/src/highlightui.ts @@ -7,7 +7,8 @@ * @module highlight/highlightui */ -import { Plugin, icons } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; +import { IconEraser, IconMarker, IconPen } from 'ckeditor5/src/icons.js'; import { addToolbarToDropdown, createDropdown, @@ -22,8 +23,6 @@ import { type DropdownView } from 'ckeditor5/src/ui.js'; -import markerIcon from './../theme/icons/marker.svg'; -import penIcon from './../theme/icons/pen.svg'; import type { HighlightOption } from './highlightconfig.js'; import type HighlightCommand from './highlightcommand.js'; @@ -112,7 +111,7 @@ export default class HighlightUI extends Plugin { const t = this.editor.t; const command: HighlightCommand = this.editor.commands.get( 'highlight' )!; - this._addButton( 'removeHighlight', t( 'Remove highlight' ), icons.eraser, null, button => { + this._addButton( 'removeHighlight', t( 'Remove highlight' ), IconEraser, null, button => { button.bind( 'isEnabled' ).to( command, 'isEnabled' ); } ); } @@ -320,7 +319,7 @@ export default class HighlightUI extends Plugin { buttonView.set( { label: t( 'Remove highlight' ), - icon: icons.eraser + icon: IconEraser } ); buttonView.delegate( 'execute' ).to( menuView ); @@ -354,7 +353,7 @@ function bindToolbarIconStyleToActiveColor( dropdownView: DropdownView ): void { * Returns icon for given highlighter type. */ function getIconForType( type: 'marker' | 'pen' ) { - return type === 'marker' ? markerIcon : penIcon; + return type === 'marker' ? IconMarker : IconPen; } type HighlightSplitButtonView = SplitButtonView & { diff --git a/packages/ckeditor5-highlight/tests/highlightui.js b/packages/ckeditor5-highlight/tests/highlightui.js index e35a565b3d0..456e5d8f340 100644 --- a/packages/ckeditor5-highlight/tests/highlightui.js +++ b/packages/ckeditor5-highlight/tests/highlightui.js @@ -4,14 +4,11 @@ */ /* global document */ +import { IconMarker, IconPen, IconEraser } from 'ckeditor5/src/icons.js'; import HighlightEditing from '../src/highlightediting.js'; import HighlightUI from '../src/highlightui.js'; -import markerIcon from '../theme/icons/marker.svg'; -import penIcon from '../theme/icons/pen.svg'; -import eraserIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg'; - import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils.js'; import { _clear as clearTranslations, add as addTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service.js'; @@ -89,7 +86,7 @@ describe( 'HighlightUI', () => { expect( button ).to.have.property( 'label', 'Highlight' ); expect( button ).to.have.property( 'tooltip', true ); - expect( button ).to.have.property( 'icon', markerIcon ); + expect( button ).to.have.property( 'icon', IconMarker ); expect( button ).to.have.property( 'isToggleable', true ); } ); @@ -118,7 +115,7 @@ describe( 'HighlightUI', () => { command.value = undefined; expect( toolbar.items.map( item => item.icon ) ) - .to.deep.equal( [ markerIcon, markerIcon, markerIcon, markerIcon, penIcon, penIcon, undefined, eraserIcon ] ); + .to.deep.equal( [ IconMarker, IconMarker, IconMarker, IconMarker, IconPen, IconPen, undefined, IconEraser ] ); } ); it( 'should have proper colors in dropdown', () => { @@ -349,7 +346,7 @@ describe( 'HighlightUI', () => { it( 'should have correct attribute values', () => { expect( menuView.buttonView.label ).to.equal( 'Highlight' ); - expect( menuView.buttonView.icon ).to.equal( markerIcon ); + expect( menuView.buttonView.icon ).to.equal( IconMarker ); expect( menuView.buttonView.iconView.fillColor ).to.equal( 'transparent' ); } ); @@ -371,13 +368,13 @@ describe( 'HighlightUI', () => { it( 'should set #label and #icon of an option', () => { expect( dumpItems( 'icon' ) ).to.have.deep.ordered.members( [ - [ 'Yellow marker', markerIcon ], - [ 'Green marker', markerIcon ], - [ 'Pink marker', markerIcon ], - [ 'Blue marker', markerIcon ], - [ 'Red pen', penIcon ], - [ 'Green pen', penIcon ], - [ 'Remove highlight', eraserIcon ] + [ 'Yellow marker', IconMarker ], + [ 'Green marker', IconMarker ], + [ 'Pink marker', IconMarker ], + [ 'Blue marker', IconMarker ], + [ 'Red pen', IconPen ], + [ 'Green pen', IconPen ], + [ 'Remove highlight', IconEraser ] ] ); } ); @@ -464,7 +461,7 @@ describe( 'HighlightUI', () => { it( 'should diplay the remove highlight button at the end', () => { expect( menuView.panelView.children.first.items.get( 6 ) ).to.be.instanceOf( ListSeparatorView ); - expect( menuView.panelView.children.first.items.last.children.first.icon ).to.equal( eraserIcon ); + expect( menuView.panelView.children.first.items.last.children.first.icon ).to.equal( IconEraser ); } ); function dumpItems( propertyName ) { @@ -488,7 +485,7 @@ describe( 'HighlightUI', () => { expect( editor.ui.componentFactory.has( 'removeHighlight' ) ).to.be.true; expect( removeHighlightButton ).to.have.property( 'tooltip', true ); expect( removeHighlightButton ).to.have.property( 'label', 'Remove highlight' ); - expect( removeHighlightButton ).to.have.property( 'icon', eraserIcon ); + expect( removeHighlightButton ).to.have.property( 'icon', IconEraser ); } ); it( 'should execute the command only once', () => { diff --git a/packages/ckeditor5-horizontal-line/ckeditor5-metadata.json b/packages/ckeditor5-horizontal-line/ckeditor5-metadata.json index 98fc7b1a5de..9758d79b2d0 100644 --- a/packages/ckeditor5-horizontal-line/ckeditor5-metadata.json +++ b/packages/ckeditor5-horizontal-line/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "horizontalLine", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/horizontalline.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/horizontal-line.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md b/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md index ed20506b048..85aadf0e144 100644 --- a/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md +++ b/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md @@ -10,7 +10,7 @@ The horizontal line feature lets you visually divide your content into sections ## Demo -To insert a horizontal line in the demo below, use the toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/horizontalline.svg Horizontal line}. Alternatively, start a new line with `---`. The {@link features/autoformat autoformatting feature} will turn it into a horizontal line. +To insert a horizontal line in the demo below, use the toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/horizontal-line.svg Horizontal line}. Alternatively, start a new line with `---`. The {@link features/autoformat autoformatting feature} will turn it into a horizontal line. {@snippet features/horizontal-line} diff --git a/packages/ckeditor5-horizontal-line/package.json b/packages/ckeditor5-horizontal-line/package.json index 2b280935475..a8e0e5e1f7d 100644 --- a/packages/ckeditor5-horizontal-line/package.json +++ b/packages/ckeditor5-horizontal-line/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-widget": "44.1.0", "ckeditor5": "44.1.0" diff --git a/packages/ckeditor5-horizontal-line/src/horizontallineui.ts b/packages/ckeditor5-horizontal-line/src/horizontallineui.ts index a2c8288047b..299a5709f1a 100644 --- a/packages/ckeditor5-horizontal-line/src/horizontallineui.ts +++ b/packages/ckeditor5-horizontal-line/src/horizontallineui.ts @@ -7,7 +7,8 @@ * @module horizontal-line/horizontallineui */ -import { icons, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; +import { IconHorizontalLine } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import type HorizontalLineCommand from './horizontallinecommand.js'; @@ -64,7 +65,7 @@ export default class HorizontalLineUI extends Plugin { view.set( { label: t( 'Horizontal line' ), - icon: icons.horizontalLine + icon: IconHorizontalLine } ); view.bind( 'isEnabled' ).to( command, 'isEnabled' ); diff --git a/packages/ckeditor5-horizontal-line/tests/horizontallineui.js b/packages/ckeditor5-horizontal-line/tests/horizontallineui.js index 34735030a40..384a670f36f 100644 --- a/packages/ckeditor5-horizontal-line/tests/horizontallineui.js +++ b/packages/ckeditor5-horizontal-line/tests/horizontallineui.js @@ -10,7 +10,7 @@ import HorizontalLineEditing from '../src/horizontallineediting.js'; import HorizontalLineUI from '../src/horizontallineui.js'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview.js'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils.js'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconHorizontalLine } from 'ckeditor5/src/icons.js'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'; import { MenuBarMenuListItemButtonView } from '@ckeditor/ckeditor5-ui'; @@ -76,7 +76,7 @@ describe( 'HorizontalLineUI', () => { it( 'should create UI component with correct attribute values', () => { expect( button.isOn ).to.be.false; expect( button.label ).to.equal( label ); - expect( button.icon ).to.equal( icons.horizontalLine ); + expect( button.icon ).to.equal( IconHorizontalLine ); } ); it( `should execute ${ featureName } command on model execute event and focus the view`, () => { diff --git a/packages/ckeditor5-html-embed/ckeditor5-metadata.json b/packages/ckeditor5-html-embed/ckeditor5-metadata.json index 30542858005..ea9e5695e4b 100644 --- a/packages/ckeditor5-html-embed/ckeditor5-metadata.json +++ b/packages/ckeditor5-html-embed/ckeditor5-metadata.json @@ -10,7 +10,7 @@ { "type": "Button", "name": "htmlEmbed", - "iconPath": "@ckeditor/ckeditor5-core/theme/icons/html.svg" + "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/html.svg" } ], "htmlOutput": [ diff --git a/packages/ckeditor5-html-embed/docs/features/html-embed.md b/packages/ckeditor5-html-embed/docs/features/html-embed.md index ee5a6a1ffb0..0a7a4d6b176 100644 --- a/packages/ckeditor5-html-embed/docs/features/html-embed.md +++ b/packages/ckeditor5-html-embed/docs/features/html-embed.md @@ -11,7 +11,7 @@ The HTML embed feature lets you embed any HTML snippet in your content. The feat ## Demo -Use the HTML embed toolbar button {@icon @ckeditor/ckeditor5-core/theme/icons/html.svg HTML embed} in the editor below to see the plugin in action. Click the "Preview editor data" button under the editor to preview the editor content, including the embedded HTML. +Use the HTML embed toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/html.svg HTML embed} in the editor below to see the plugin in action. Click the "Preview editor data" button under the editor to preview the editor content, including the embedded HTML. {@snippet features/html-embed} diff --git a/packages/ckeditor5-html-embed/package.json b/packages/ckeditor5-html-embed/package.json index a58d31bf4da..3141135d7a6 100644 --- a/packages/ckeditor5-html-embed/package.json +++ b/packages/ckeditor5-html-embed/package.json @@ -14,6 +14,7 @@ "main": "src/index.ts", "dependencies": { "@ckeditor/ckeditor5-core": "44.1.0", + "@ckeditor/ckeditor5-icons": "0.0.1", "@ckeditor/ckeditor5-ui": "44.1.0", "@ckeditor/ckeditor5-utils": "44.1.0", "@ckeditor/ckeditor5-widget": "44.1.0", diff --git a/packages/ckeditor5-html-embed/src/htmlembedediting.ts b/packages/ckeditor5-html-embed/src/htmlembedediting.ts index 8cb184b300c..de3e17ccadd 100644 --- a/packages/ckeditor5-html-embed/src/htmlembedediting.ts +++ b/packages/ckeditor5-html-embed/src/htmlembedediting.ts @@ -7,10 +7,11 @@ * @module html-embed/htmlembedediting */ -import { Plugin, icons, type Editor } from 'ckeditor5/src/core.js'; +import { Plugin, type Editor } from 'ckeditor5/src/core.js'; import { ButtonView } from 'ckeditor5/src/ui.js'; import { toWidget } from 'ckeditor5/src/widget.js'; import { logWarning, createElement } from 'ckeditor5/src/utils.js'; +import { IconCancel, IconCheck, IconPencil } from 'ckeditor5/src/icons.js'; import type { HtmlEmbedConfig } from './htmlembedconfig.js'; import HtmlEmbedCommand from './htmlembedcommand.js'; @@ -408,7 +409,7 @@ function createUIButton( editor: Editor, type: 'edit' | 'save' | 'cancel', onCli buttonView.set( { class: `raw-html-embed__${ type }-button`, - icon: icons.pencil, + icon: IconPencil, tooltip: true, tooltipPosition: editor.locale.uiLanguageDirection === 'rtl' ? 'e' : 'w' } ); @@ -417,21 +418,21 @@ function createUIButton( editor: Editor, type: 'edit' | 'save' | 'cancel', onCli if ( type === 'edit' ) { buttonView.set( { - icon: icons.pencil, + icon: IconPencil, label: t( 'Edit source' ) } ); buttonView.bind( 'isEnabled' ).to( command ); } else if ( type === 'save' ) { buttonView.set( { - icon: icons.check, + icon: IconCheck, label: t( 'Save changes' ) } ); buttonView.bind( 'isEnabled' ).to( command ); } else { buttonView.set( { - icon: icons.cancel, + icon: IconCancel, label: t( 'Cancel' ) } ); } diff --git a/packages/ckeditor5-html-embed/src/htmlembedui.ts b/packages/ckeditor5-html-embed/src/htmlembedui.ts index 56bc6ef1c7d..d84f70e315c 100644 --- a/packages/ckeditor5-html-embed/src/htmlembedui.ts +++ b/packages/ckeditor5-html-embed/src/htmlembedui.ts @@ -7,7 +7,8 @@ * @module html-embed/htmlembedui */ -import { icons, Plugin } from 'ckeditor5/src/core.js'; +import { Plugin } from 'ckeditor5/src/core.js'; +import { IconHtml } from 'ckeditor5/src/icons.js'; import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import type { RawHtmlApi } from './htmlembedediting.js'; import type HtmlEmbedCommand from './htmlembedcommand.js'; @@ -70,7 +71,7 @@ export default class HtmlEmbedUI extends Plugin { const view = new ButtonClass( editor.locale ) as InstanceType; view.set( { - icon: icons.html + icon: IconHtml } ); view.bind( 'isEnabled' ).to( command, 'isEnabled' ); diff --git a/packages/ckeditor5-html-embed/tests/htmlembedui.js b/packages/ckeditor5-html-embed/tests/htmlembedui.js index fcb8a828612..44ebe7e6d0b 100644 --- a/packages/ckeditor5-html-embed/tests/htmlembedui.js +++ b/packages/ckeditor5-html-embed/tests/htmlembedui.js @@ -11,7 +11,7 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictest import HtmlEmbedUI from '../src/htmlembedui.js'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview.js'; import { MenuBarMenuListItemButtonView } from '@ckeditor/ckeditor5-ui'; -import { icons } from 'ckeditor5/src/core.js'; +import { IconHtml } from 'ckeditor5/src/icons.js'; describe( 'HtmlEmbedUI', () => { let element, editor, button; @@ -72,7 +72,7 @@ describe( 'HtmlEmbedUI', () => { it( 'should create UI component with correct attribute values', () => { expect( button.isOn ).to.be.false; expect( button.label ).to.equal( label ); - expect( button.icon ).to.equal( icons.html ); + expect( button.icon ).to.equal( IconHtml ); } ); it( `should execute ${ featureName } command on model execute event and focus the view then switch to edit source mode` + diff --git a/packages/ckeditor5-html-support/docs/features/full-page-html.md b/packages/ckeditor5-html-support/docs/features/full-page-html.md index 18a564b3538..d1809afcb51 100644 --- a/packages/ckeditor5-html-support/docs/features/full-page-html.md +++ b/packages/ckeditor5-html-support/docs/features/full-page-html.md @@ -13,7 +13,7 @@ Thanks to the full page HTML feature you can use CKEditor 5 to edit entire ## Demo -Use the {@link features/source-editing source editing feature} toolbar button {@icon @ckeditor/ckeditor5-source-editing/theme/icons/source-editing.svg Source editing} to view and edit the HTML source of the document. Pay attention to the underlying markup. +Use the {@link features/source-editing source editing feature} toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/source-editing.svg Source editing} to view and edit the HTML source of the document. Pay attention to the underlying markup. {@snippet features/full-page-html} diff --git a/packages/ckeditor5-html-support/docs/features/general-html-support.md b/packages/ckeditor5-html-support/docs/features/general-html-support.md index 22d8364659c..ba0c70a8946 100644 --- a/packages/ckeditor5-html-support/docs/features/general-html-support.md +++ b/packages/ckeditor5-html-support/docs/features/general-html-support.md @@ -13,7 +13,7 @@ With the General HTML Support (GHS) feature, developers can enable HTML features ## Demo -Use the {@link features/source-editing source editing feature} toolbar button {@icon @ckeditor/ckeditor5-source-editing/theme/icons/source-editing.svg Source editing} to view and edit the HTML source of the document. You can find the configuration of this snippet below the demo. +Use the {@link features/source-editing source editing feature} toolbar button {@icon @ckeditor/ckeditor5-icons/theme/icons/source-editing.svg Source editing} to view and edit the HTML source of the document. You can find the configuration of this snippet below the demo. You can configure the General HTML Support feature using the `config.htmlSupport` property. With this property, you need to list the HTML features that should be handled by GHS. diff --git a/packages/ckeditor5-html-support/docs/features/html-comments.md b/packages/ckeditor5-html-support/docs/features/html-comments.md index de92c730dde..452e6f5b570 100644 --- a/packages/ckeditor5-html-support/docs/features/html-comments.md +++ b/packages/ckeditor5-html-support/docs/features/html-comments.md @@ -19,7 +19,7 @@ By default, the editor filters out all HTML comments on initialization. The {@li ## Demo -The editor below is configured to keep HTML comments in the document content. You can view the source of the document using the {@link features/source-editing source editing} feature. Toggle the source editing mode {@icon @ckeditor/ckeditor5-source-editing/theme/icons/source-editing.svg Source editing} to see there is an HTML comment in the document source. Try uncommenting the paragraph below the picture. Once you leave the source editing mode, you will see this paragraph in the editable area. +The editor below is configured to keep HTML comments in the document content. You can view the source of the document using the {@link features/source-editing source editing} feature. Toggle the source editing mode {@icon @ckeditor/ckeditor5-icons/theme/icons/source-editing.svg Source editing} to see there is an HTML comment in the document source. Try uncommenting the paragraph below the picture. Once you leave the source editing mode, you will see this paragraph in the editable area. {@snippet features/html-comment} diff --git a/packages/ckeditor5-html-support/tests/manual/ghs-no-features.html b/packages/ckeditor5-html-support/tests/manual/ghs-no-features.html index 4d422f798b6..57fdec0cd74 100644 --- a/packages/ckeditor5-html-support/tests/manual/ghs-no-features.html +++ b/packages/ckeditor5-html-support/tests/manual/ghs-no-features.html @@ -15,13 +15,6 @@ border: 1px solid red !important; } - -
@@ -303,7 +296,7 @@

h6

-

+

diff --git a/packages/ckeditor5-html-support/tests/manual/objects.html b/packages/ckeditor5-html-support/tests/manual/objects.html index 743a38f580f..e236a3e210a 100644 --- a/packages/ckeditor5-html-support/tests/manual/objects.html +++ b/packages/ckeditor5-html-support/tests/manual/objects.html @@ -30,7 +30,7 @@

-

+

some custom text

@@ -61,7 +61,7 @@

-

+