How do I add custom Icons inside event circles?

BPMN & Modeling Discussion & Questions
1

Hey,

we are currently working on an extension for the Camunda modeler.

We added already custom icons to the ReplaceOptions menu, so we can choose between them and select these options, the icons are showing properly.

However we simply cannot find out where we have to define that these icons also get rendered inside the circle of an event, just like the envelope for a Message-event.

Could someone give us a hint which function/in which file these definitions are made?

Thanks in advance.

2

Hey,

how an element is rendered is defined in the BpmnRenderer. For custom rendering have a look at this example: https://github.com/bpmn-io/bpmn-js-example-custom-rendering

3

how an element is rendered is defined in the BpmnRenderer.

Yes, we know this but can you tell us in which function these icons are defined to be rendered inside the circles?

We already know this custom renderer example, it is really useful if you want to add custom elements, but in our case we think it should be easier by just adding “more icons” to the already existing one’s. I hope you understand what I mean.

Here is a screenshot. We want e.g. that if we choose the Spider Condition, so that the Spider ICON, just like the envelope icon, inside the event.
TestA

4

As you can see in the BpmnRenderer a pathmap component is used that contains all the path data of the symbols: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/draw/PathMap.js

5

Thanks for your reply, but I can still not figure out, how to render my custom icon inside an event circle:

You said that I should take a look into the path data in ‘pathmap.js’, but how do I convert my ‘icon’ into code that is represented in ‘pathmap.js’ this way:

this.pathMap = {
‘EVENT_MESSAGE’: {
d: ‘m {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}’, (Example from Message Event)

Is there a converter that can create these coordinates from my svg. file ?

6

There’s no converter. You have to convert it manually.

7

Any pointers on how to convert

8