Icons

Icons

SYP-Editor uses icons within the toolbar of its wrapper of @tiptap. To make SYP-Editor as friction-free as possible and as there multiple providers for icons like fontawesome, bootstrap-icons and others, we added icon-providers.

Icon-Providers

Icon-Providers offer two methods, a getName and a addIcon-method. First is just the name of the provider, which is used within the configuration of the ToolbarItems. The second addIcon-method adds a Icon based on its name and additionally passed attributes to the given element-node. This makes it open to multiple variants of including icons into your application.

Attributes Some icon-providers may need specific attributes or have specific classes, that are used globally. Therefore you can configure configure attributes per ToolbarItem and its parameter iconAttributes or globally in the settings:

{
  settings: {
    iconAttributes: {
      ...
    }
  }
}

Global configuration will be overridden by the local, per icon configuration.

Supported Icon-Providers

As of now SYP-Editor just offers support for icons of fontawesome 5 by default.

Fontawesome 5
You can use that provider via its name fontawesome.
This provider is based on fontawesomes webfonts and uses <i>-Tags.
When adding icons just the part after fa- is needed, e.g. fa-bold will be bold.

Additionally the attribute class can be configured, which is the fontawesome global class, e.g. fas. By default it will use fas, which includes the most free icons.

More to come
If you seek for more, feel free to open a PR and we will add the icon-provider to the pool.
Otherwise you can also follow the guide below and create your own icon-provider.

Custom Icon-Providers

In case you have specific needs or own icons, you are also able to create your own icon-provider.

To start you need to create a class, which inherits from the interface IconProvider, like this:

import { IconProvider } from "@syntaxphoenix/syp-editor";

export class Fontawesome5IconProvider implements IconProvider {
    public getName() {
        return 'your-name';
    }

    public addIcon(element: HTMLElement, icon: string, attributes: any): void {
        ...[Implement your own logic here to create your icons]
    }
}

You can now implement your own logic within the addIcon-function. The getName-method will define the name, which needs to be used as icon-provider in the ToolbarItems. You should make sure, that this name is unique and does not conflict with others. Especially when submitting your icon-provider to this project it is very important, that the naming is unique and clear, e.g. fontawesome5 for Fontawesome v5 and so on.

If you don't submit your's to the project, you'll need to add a secondary step and include the provider in your settings, like this:

let element = document.querySelector('#editor');
let editor = new Editor(element, ...);

let sypWrapper = new SypEditor(
  element,
  editor,
  {
    iconproviders: [
      new YourIconProvider()
    ]
  }
);