Create custom icons

[jadermoraes]

Hi, I'd like to be able to create custom geometric icons to use and handle in my grapeJs project.
Objects like arrows and pointers that the user can edit and move as desired, like the edit image option.

I really like those options, would it be possible to have them outside the editor, as options to add directly in grapeJS?

Thanks!

[artf]

You can simply create a set of Blocks where the content is an SVG

[jadermoraes]

I'm already creating blocks and adding to grapejs init, something like this:

export const loadBlocks = async () => {
let blocks = [counter, image, video, text, button, arrow, variable];
blocks.forEach((initFunction) => initFunction());
};

arrow.js:
const arrow = () => {
const editor = grapesjs.editors[0];
const id = "arrow";

editor.Components.addType(id, {
model: {
defaults: {
startfrom: 10,
attributes: { class: "arrow" },
droppable: false,
resizable: true,
script: arrowScript,
components: <svg viewBox="0 0 26 26" width="40" height="40"> <path d="M2 8h12M10 4l4 4-4 4" stroke="currentColor" stroke-width="2" fill="none" /> </svg>,
styles: ,
},
},
});

I'm I too far off? do you have a working example that might help?