diff --git a/src/index.js b/src/index.js
index 3f45adb68..963d53929 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,9 +4,9 @@
import infoIcon from './../theme/icons/info.svg';
import insertMermaidIcon from './../theme/icons/insert.svg';
-import previewModeIcon from './../theme/icons/previewMode.svg';
-import splitModeIcon from './../theme/icons/splitMode.svg';
-import sourceModeIcon from './../theme/icons/sourceMode.svg';
+import previewModeIcon from './../theme/icons/preview-mode.svg';
+import splitModeIcon from './../theme/icons/split-mode.svg';
+import sourceModeIcon from './../theme/icons/source-mode.svg';
export { default as Mermaid } from './mermaid';
diff --git a/src/mermaidui.js b/src/mermaidui.js
index d6958065e..de7d10ba5 100644
--- a/src/mermaidui.js
+++ b/src/mermaidui.js
@@ -6,9 +6,9 @@ import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import insertMermaidIcon from '../theme/icons/insert.svg';
-import previewModeIcon from '../theme/icons/previewMode.svg';
-import splitModeIcon from '../theme/icons/splitMode.svg';
-import sourceModeIcon from '../theme/icons/sourceMode.svg';
+import previewModeIcon from '../theme/icons/preview-mode.svg';
+import splitModeIcon from '../theme/icons/split-mode.svg';
+import sourceModeIcon from '../theme/icons/source-mode.svg';
import infoIcon from '../theme/icons/info.svg';
/* global window */
@@ -52,12 +52,12 @@ export default class MermaidUI extends Plugin {
const editor = this.editor;
const t = editor.t;
- editor.ui.componentFactory.add( 'Mermaid', locale => {
+ editor.ui.componentFactory.add( 'mermaid', locale => {
const buttonView = new ButtonView( locale );
const command = editor.commands.get( 'insertMermaidCommand' );
buttonView.set( {
- label: t( 'Insert Mermaid' ),
+ label: t( 'Insert Mermaid diagram' ),
icon: insertMermaidIcon,
tooltip: true
} );
@@ -89,7 +89,7 @@ export default class MermaidUI extends Plugin {
const link = 'https://mermaid-js.github.io/mermaid/#/flowchart';
buttonView.set( {
- label: t( 'Mermaid info' ),
+ label: t( 'Read more about Mermaid diagram syntax' ),
icon: infoIcon,
tooltip: true
} );
diff --git a/tests/index.js b/tests/index.js
index 5f342e3ef..9f33b05cd 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -3,9 +3,9 @@ import Mermaid from '../src/mermaid';
import infoIcon from './../theme/icons/info.svg';
import insertMermaidIcon from './../theme/icons/insert.svg';
-import previewModeIcon from './../theme/icons/previewMode.svg';
-import splitModeIcon from './../theme/icons/splitMode.svg';
-import sourceModeIcon from './../theme/icons/sourceMode.svg';
+import previewModeIcon from './../theme/icons/preview-mode.svg';
+import splitModeIcon from './../theme/icons/split-mode.svg';
+import sourceModeIcon from './../theme/icons/source-mode.svg';
describe( 'CKEditor5 Mermaid DLL', () => {
it( 'exports MermaidWidget', () => {
diff --git a/theme/icons/insert.svg b/theme/icons/insert.svg
index c7039e4dd..b87e06bf7 100644
--- a/theme/icons/insert.svg
+++ b/theme/icons/insert.svg
@@ -1 +1 @@
-
+
diff --git a/theme/icons/preview-mode.svg b/theme/icons/preview-mode.svg
new file mode 100644
index 000000000..cdccfcaf1
--- /dev/null
+++ b/theme/icons/preview-mode.svg
@@ -0,0 +1 @@
+
diff --git a/theme/icons/previewMode.svg b/theme/icons/previewMode.svg
deleted file mode 100644
index b87e06bf7..000000000
--- a/theme/icons/previewMode.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/theme/icons/sourceMode.svg b/theme/icons/source-mode.svg
similarity index 100%
rename from theme/icons/sourceMode.svg
rename to theme/icons/source-mode.svg
diff --git a/theme/icons/splitMode.svg b/theme/icons/split-mode.svg
similarity index 100%
rename from theme/icons/splitMode.svg
rename to theme/icons/split-mode.svg