Customise inline tool icon(s)

[gatanaso]

Hi,

First of all, thank you for such an amazing editor 🙌

I wanted to know is it possible to customise the built in inline tool icons?

At the moment the icon SVGs for the inline tools are hardcoded. For example:

editor.js/src/components/inline-tools/inline-tool-bold.ts

Line 64 in 63eeec0

this.nodes.button.appendChild($.svg('bold', 12, 14));

It would be great if there is a way to define a css class or inject a custom SVG icon for an inline tool via the inlineToolbar property.

Thanks you 🙏

[pie6k]

I also think it would be amazing!

While I think Editor.js looks cool, I'd like to customize it to match UI of website I'd use it in.

[ony3000]

It may not be an elegant way, but this way you can customize it.

First, create a custom inline tool with the same structure as src/components/inline-tools/inline-tool-bold.ts.

class MyBoldTool {

  static get isInline() {
    return true;
  }

  static get title() {
    return 'Bold';
  }

  static get sanitize() {
    return {
      b: {},
    };
  }

  constructor() {
    this._commandName = 'bold';
    this._CSS = {
      button: 'ce-inline-tool',
      buttonActive: 'ce-inline-tool--active',
      buttonModifier: 'ce-inline-tool--bold',
    };
    this._nodes = {
      button: undefined,
    };
  }

  render() {
    this._nodes.button = document.createElement('button');
    this._nodes.button.type = 'button';
    this._nodes.button.classList.add(this._CSS.button, this._CSS.buttonModifier);
    this._nodes.button.appendChild($.svg('bold', 12, 14));

    return this._nodes.button;
  }

  surround(range) {
    document.execCommand(this._commandName);
  }

  checkState(selection) {
    const isActive = document.queryCommandState(this._commandName);

    this._nodes.button.classList.toggle(this._CSS.buttonActive, isActive);

    return isActive;
  }

  get shortcut() {
    return 'CMD+B';
  }
}

export default MyBoldTool;

Then, change the icon inside the render() to whatever you want.

-    this._nodes.button.appendChild($.svg('bold', 12, 14));
+    const icon = document.createElement('i');
+    icon.classList.add('fas', 'fa-bold'); // Font Awesome 5
+    this._nodes.button.appendChild(icon);

And finally, add this tool to the editor configuration.

const editor = new EditorJS({

  /* Your editor configs are here. */

  tools: {
    bold: {
      class: MyBoldTool,
    },
  },
});

Now you can use customized icon.

[ony3000]

In addition to the comment above, the italic tool has a similar structure to the bold tool, so it can be easily customized, but the link tool is a bit more complicated.

See the following link for example code: MyLinkTool.js

Icon redefinition can be done by modifying the code in render() just like other tools.

-    this._nodes.button.appendChild($.svg('link', 14, 10));
+    const linkIcon = document.createElement('i');
+    linkIcon.classList.add('icon--link');     // required
+    linkIcon.classList.add('fas', 'fa-link'); // Font Awesome 5
+    this._nodes.button.appendChild(linkIcon);

-    this._nodes.button.appendChild($.svg('unlink', 15, 11));
+    const unlinkIcon = document.createElement('i');
+    unlinkIcon.classList.add('icon--unlink');     // required
+    unlinkIcon.classList.add('fas', 'fa-unlink'); // Font Awesome 5
+    this._nodes.button.appendChild(unlinkIcon);

Adding it to the editor configuration is the same as other tools.

const editor = new EditorJS({

  /* Your editor configs are here. */

  tools: {

    /* Your other tools are here. */

    link: {
      class: MyLinkTool,
    },
  },
});

Now you can use custom icon in the default inline tools.

[DblK]

A lot lot later than the original post, put I just found out editorjs and this article.
You can change the icon of anything in the toolbar like this:

paragraph: {
        class: ParagraphAlignment,
        inlineToolbar: true,
        toolbox: [
          {
            title: 'Texte',
            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"></path></svg>',
          },
        ],
      },

This way, you can use editorjs-paragraph-with-alignment with the standard text icon.

[neSpecc]

It is the right answer

[Matthieu24]

does not work with the inline toolbar