title: Fabric.js - wait until loadedSVGFromString has finished before rendering group
body: <p>I'm working with <a href="http://fabricjs.com/fabric-intro-part-3" rel="nofollow noreferrer">Fabric.js</a> to create an interactive canvas. When a user clicks on a button I call the addNewItem function in my diagram.js file. After clicking this I want to add a new group to the center of the canvas. The issue I have is that one of the two elements that I want to add to the group is an SVG that I'm loading via Fabric's own <code>loadSVGFromString</code> method. This takes time to complete which means that in the below example <code>group</code> is not defined in the Promise.</p>
  
  <p>diagram.js (only relevant code shown)</p>
  
  <pre><code>addNewItem = (e, item) =&gt; {
    e.preventDefault();
  
    drawPlayer(item.svg, this.state.playerIconColor, borderColor, item.sizes[this.state.iconSize].height, item.sizes[this.state.iconSize].width, 'LM')
    .then((newItem) =&gt; {
      newItem.hasControls = false;
      canvas
        .add(newItem)
        .centerObject(newItem)
        .setActiveObject(newItem)
        .renderAll();
      newItem.setCoords();
    })
    .catch((notCreated) =&gt; {
      alert(notCreated);
    });
  }
  </code></pre>
  
  <p>drawPlayer.js</p>
  
  <pre><code>import { fabric } from 'fabric';
  
  const drawPlayer = (icon, iconFill, borderColor, height, width, label) =&gt; {
    // Create empty group
    let group;
  
    fabric.loadSVGFromString(icon, (objects, options) =&gt; {
      const canvasItem = fabric.util.groupSVGElements(objects, options);
      canvasItem.hasControls = false;
      canvasItem.setFill(iconFill);
      canvasItem.set({ borderColor });
      canvasItem.scaleToHeight(height);
      canvasItem.scaleToWidth(width);
  
      const playerText = new fabric.Text(label, {
        fontSize: 10,
        originX: 'center',
        originY: 'center',
      });
  
      group = new fabric.Group([canvasItem, playerText], { left: 200, top: 200 });
    });
  
    return new Promise((resolve, reject) =&gt; {
      if (group.length &gt; 0) {
        resolve(group);
      } else {
        reject('Not created');
      }
    });
  };
  
  export default drawPlayer;
  </code></pre>