Do I have to use font awesome icons when adding a custom toolbar icon for my plugin's commands?

Development Plugins
1

All plugins I've looked at on GitHub use font awesome.

From joplin-plugin-multimd-table-tools:

{
        name: "formatAllTables",
        label: "Format all tables",
        iconName: "fas fa-star-of-life", // fas fa-table-cells, icon-table2
        accelerator: null,
        add: {
            toContextMenu: false,
            toToolsMenu: "tableToolsFormat",
            asToolbarButton: true
        },
        condition: CommandCondition.None,
        execute: editorExecCommand("formatAllTables")
    },
{
        name: "tableAddRowBelow",
        label: "Row (+): Add below ↓",
        iconName: "fas fa-grip-lines", // fas fa-plus, fas fa-equals, fas fa-square-plus, fas fa-table-rows, fas fa-diagram-next
        accelerator: "CmdOrCtrl+Enter",
        add: {
            toContextMenu: false,
            toToolsMenu: "tableToolsRow",
            asToolbarButton: true
        },
        condition: CommandCondition.CursorInTable,
        execute: editorExecCommand("tableAddRowBelow")
    },

Is there any way I can use a custom SVG for my plugin's toolbar icons or is this not possible?

Any help would be great.

2

At least on mobile, it should be possible to use icons from a few different icon sets (but not a custom SVG icon). See Icon.tsx for the code responsible for displaying mobile icons and the React Native Vector Icons directory.

On desktop, the available-by-default icons may be more limited. However, it may be possible to override certain icons using CSS (perhaps similar to what the MacOS theme plugin does).

3

Ok, that kind of makes sense. I'm new to Joplin plugin authoring. Where can I find all of the icon definitions and names included with Joplin? I'm targeting the desktop app. For instance, in the official repository there is a plugin example here: https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/register_command/src

The content I'm interested in:

await joplin.commands.register({
    name: 'testCommand2',
    label: 'My Test Command 2',
    iconName: 'fas fa-drum',
    execute: async () => {
        alert('Testing plugin command 2');
    },
});

Where can I find all values for iconName? This specific command references fas fa-drum. Where is the author getting these icon labels and how do I know which are included in Joplin?

Another plugin called Multi-markdown Table Tools defines buttons in the same way:

{
    name: "formatAllTables",
    label: "Format all tables",
    iconName: "fas fa-star-of-life", // fas fa-table-cells, icon-table2
    accelerator: null,
    add: {
        toContextMenu: false,
        toToolsMenu: "tableToolsFormat",
        asToolbarButton: true
    },
    condition: CommandCondition.None,
    execute: editorExecCommand("formatAllTables")
}

Again, how do I know what icons are available? Where is the author getting fas fa-star-of-life?

Does Joplin include all FontAwesome free icons?

Also, I found this page on Plugin Theming.

It says:

On desktop, your plugin view will have access to icons used by the app. It is however not recommended to use them because they may change in future versions. And it will also make your plugin incompatible with the mobile app (which does not expose any icon library).

Instead a recommended approach is to add Font Awesome in your plugin project, and to import only the icons you'll need. To do so using React, follow these instructions:

Install Font Awesome:

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome

Import and load the icons:

From one of your top TypeScript files:

import { library } from '@fortawesome/fontawesome-svg-core';

// Import the specific icons you want to use
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';

// Add the icons to the library
library.add(faTimes, faCheckCircle);

Should I follow the approach outlined in the "Plugin Theming" document and install @fortawesome/fontawesome-svg-core etc. into my plugin project, or is there an easier way to just pull/define icons that come with Joplin?

4

Joplin desktop includes FontAwesome 5, which can be searched here:

For FontAwesome toolbar icons (as opposed to icons in a plugin dialog or panel), it shouldn't be necessary to add @fortawesome/fontawesome-svg-core to your project.