@js-draw/material-iconsA material icon pack for js-draw.
The icons in this pack are licensed under the Apache 2.0 License. See the icon pack's GitHub repository.
If using a bundler (e.g. webpack), it should be possible to add @js-draw/material-icons as a dependency and import it directly.
For example,
import Editor from 'js-draw';
import { MaterialIconProvider } from '@js-draw/material-icons';
import 'js-draw/bundledStyles';
const editor = new Editor(document.body, {
iconProvider: new MaterialIconProvider(),
});
// Add a toolbar that uses the icons
editor.addToolbar();
It's also possible to include js-draw and @js-draw/material-icons from a CDN.
For example, with JSDelivr,
<script src="https://cdn.jsdelivr.net/npm/js-draw@1.23.1/dist/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@js-draw/material-icons@1.23.1/dist/bundle.js"></script>
Then, in a script,
// makeMaterialIconProviderClass provides @js-draw/material-icons with an instance of the js-draw library.
const MaterialIcons = jsdrawMaterialIcons.makeMaterialIconProviderClass(jsdraw);
const editor = new jsdraw.Editor(document.body, {
iconProvider: new MaterialIcons(),
});
editor.addToolbar();
Notes:
1.23.1 should be replaced with the latest versions of js-draw and @js-draw/material-icons.integrity="..." attribute on the <script> tags. Read more about using SRI with JSDelivr.
@js-draw/material-iconsProvides a material icon theme for
js-draw.Example
import { Editor, makeEdgeToolbar } from 'js-draw'; import { MaterialIconProvider } from '@js-draw/material-icons'; // Apply js-draw CSS import 'js-draw/styles'; const editor = new Editor(document.body, { iconProvider: new MaterialIconProvider(), }); // Ensure that there is enough room for the toolbar editor.getRootElement().style.minHeight = '500px'; // Add a toolbar const toolbar = makeEdgeToolbar(editor); // ...with the default elements toolbar.addDefaults();See
MaterialIconProvider