How to replace the icon in the top left corner of the task node with a custom SVG?

Developers
1

How can I replace the icon in the top left corner of the task node with my own SVG icon? What I can do now is to add icons in the form of images through the CustomsRenderer.jsCustomRenderer.

 const img = svgCreate("image", {
                x: 2,
                y: 0,
                width: 25,
                height: 25,
                href: 'http://test.png'
            });
          
     
            svgAppend(parentNode, img);

But that’s not what I want. What I really need is to replace the original icon and add a new SVG icon.
image

2

codesandbox： https://codesandbox.io/p/devbox/bpmn-i18n-wqy46g?file=%2Fsrc%2Fcustom%2FCustomRenderer.js%3A35%2C1

image
image2002×1126 308 KB

3

Have a look at @bpmn-io/element-template-icon-renderer and some related topics:

Changing Icon in a service task shape
Add custom icon within custom rendered shape

4

image
image1920×1033 214 KB

I have seen all of these, but their implementation methods involve adding image forms, which is not what I want. What I need is to replace the original SVG icon and path forms with new SVG.

5

Can you help implement this requirement in the [codesandbox](https://codesandbox.io/p/devbox/bpmn-i18n-wqy46g ?file=%2Fsrc%2Fcustom%2FCustomRenderer.js%3A35%2C1)? Provide the main steps for replacing native SVG icons! Thank you very much.

6

You have all the information you need to build this, with bpmn-js-example-custom-rendering being the best source. I can help you if you have some specific questions on the way, but I won’t build it for you. :slightly_smiling_face: