Render a .svg in custom element

Developers
1

I have customized bpmn-js custom elements. It looks like this:
Untitled
I can use a .svg as a .css background for custom palette and custom context pad (can be seen in the image).
In the custom renderer example, it draw/create a colorful rectangle and a text inside it. I need to know how to use a ready Icon.svg file instead of creating a shape/rectangle?

I tried using font awesom instead of text, and tried importing a svg to my customRendere.js and tried many samples like this. I can’t manage it.

This is the current code which create a simple rounded rectangle having a text inside it.

  drawShape(parentNode, element) {
	  
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
    const service_type = this.getServiceType(element);

    if (!isNil(service_type)) {
      const color = this.getColor(service_type);
      const rect = drawRect(parentNode, 50, 20, TASK_BORDER_RADIUS, color);    
      svgAttr(rect, {
        transform: 'translate(0, -20)'
      });
      var text = svgCreate('text');
      svgAttr(text, {
        fill: '#fff',
        transform: 'translate(5, -5)'
      });
      svgClasses(text).add('djs-label');     
      svgAppend(text, document.createTextNode(service_type));
      svgAppend(parentNode, text);
    }

    return shape;
  }

What about if I have imported emailIcon.svg in my customrenderer.js? How to replace simple rectangle with ready to use emailIcon.svg file?

2

You’d have to turn the imported SVG string (I assume it’s a string) into an actual SVG to render it. How are you importing your SVG?

3

In CustomRenderer.js I imported .svg like this:

import email from "../../styles/email.svg";

And replaced this to render myIcon:

drawShape(parentNode, element) {
	  
const shape = this.bpmnRenderer.drawShape(parentNode, element);

	var myCustomIcon = svgCreate("image", {
			x: 0,
			y: 0,
			width: 25,
			height: 25,
			href: email
	});

	svgClasses(myCustomIcon).add('djs-label'); //No need ??
	svgAttr(myCustomIcon, {
	       transform: 'translate(0, 20)'
	});
	svgAppend(parentNode, myCustomIcon);

    return myCustomIcon;
  }

To load the svg in webpack , I added this to webpack.config.js: (webpack asset modules)

  module: {
    rules: [
		{
			test: /\.(svg)$/i,			
			type: 'asset/resource'	
		},
 .   .   .

And now the Icon is being shown successfully.

Untitled

1 Like
4

Hi,

your example shows exactly what I try to do at the moment, but I can´t make it run - is your code available somewhere?

Best regards, Jürgen