Class IconProvider

Provides icons that can be used in the toolbar and other locations.

To customize the icons used by the editor, extend this class and override methods.

import * as jsdraw from 'js-draw';

class CustomIconProvider extends jsdraw.IconProvider {
    // Use '☺' instead of the default dropdown symbol.
    public override makeDropdownIcon() {
        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        icon.innerHTML = `
            <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
        `;
        icon.setAttribute('viewBox', '0 0 100 100');
        return icon;
    }
}

const icons = new CustomIconProvider();
const editor = new jsdraw.Editor(document.body, {
    // The icon pack to use is specified through the editor's initial
    // configuration object:
    iconProvider: icons,
});

// Add a toolbar that uses these icons
jsdraw.makeDropdownToolbar(editor).addDefaults();

Constructors

Methods

  • Must be overridden by icon packs that need attribution.

    Returns null | string

  • Returns { patternDefElement: SVGElement; patternRef: string; get patternDef(): string }

    An object with both the definition of a checkerboard pattern and the syntax to reference that pattern. The defs provided by this function should be wrapped within a <defs></defs> element.

    Note: This function's return value includes both patternDefElement (which returns an Element) and a (deprecated) patternDef string. Avoid using the patternDef result.

    • patternDefElement: SVGElement
    • patternRef: string
    • get patternDef(): string

      use patternDefElement

  • Parameters

    • pathData: string

      SVG path data (e.g. m10,10l30,30z)

    • fill: string = 'var(--icon-color)'

      A valid CSS color (e.g. var(--icon-color) or #f0f). This can be none.

    • strokeColor: string = 'none'
    • strokeWidth: string = '0px'

    Returns IconElemType

OpenSource licenses