Load svg files to use it in Custom Renderer

[Mustafa_Said_Ucar]

Hi,

I would like to use my custom svg icons within my custom modeler. For example, instead of using diamond shape with big X for exclusive gateway, I would like to use different icon. I tried to run nyan-cat example but I couldn’t make it worked. What I get is below when I run the example.

[barmac]

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks

[Mustafa_Said_Ucar]

Actually, the screenshot belongs to example nyan-cat project, which can be found in the following link;
https://github.com/bpmn-io/bpmn-js-nyan. I simply cloned the repository, and ran the following commands;

npm install
npm run all
npm run dev

I was expecting to see running cat on browser, however I couldn’t. My aim was replace one svg icon (for example ExclusiveGateway) with some svg that I downloaded from internet. Later, I figured it out how to do it. I’m adding the code piece for anyone who wants to use custom svg in their viewer/modeler.

• Include the svg to your renderer;

import mailSvg from "../assets/svg/mail.svg";

• In your drawShape(parentNode, element) method, create an svg and assign imported svg icon to the href attribute. Therefore, instead of default shape, your custom svg icons will be rendered by modeler.

var myCustomIcon = svgCreate("image", {
    x: 0,
    y: 0,
    width: element.width,
    height: element.height,
    href: mailSvg
});

svgAppend(parentNode, myCustomIcon);
return myCustomIcon;

I used mailSvg instead of bmpn:EndEvent and here is the output.