Icons - Plugins - Redactor

Icons

Adds a toolbar button for inserting inline SVG icons from a configurable grid. Icons can be wrapped in a custom HTML element before insertion.

Click Icons in the toolbar and pick an icon from the grid. The icon HTML is inserted at the caret.

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/icons/icons.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['icons']
});

Options

context (boolean)
- default true
- When true, adds the button to the context toolbar as well.
icon (string)
- SVG icon HTML for the toolbar button.
wrapper (string)
- default '<span class="icon icon-text"></span>'
- HTML wrapper around each inserted icon. The chosen SVG is placed inside this element.
items (string[])
- SVG icon HTML strings shown in the dropdown grid. See IconsPlugin.defaultOptions.items for the built-in set.

Redactor('#entry', {
    plugins: ['icons'],
    icons: {
        wrapper: '<span class="my-icon"></span>',
        items: [
            '<svg>...</svg>',
            '<svg>...</svg>'
        ]
    }
});

Language strings

en: {
    icons: {
        icons: 'Icons'
    }
}

Events

This plugin does not emit events.

API

insert

Inserts an icon at the caret and closes the dropdown.

Parameters:

icon (string) — SVG HTML to insert (after optional wrapping).

app.icons.insert({ icon: '<svg>...</svg>' });