JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<h1>Trying to animate/morph two icons</h1>
<h2>
  <a href="https://codeburst.io/svg-morphing-the-easy-way-and-the-hard-way-c117a620b65f">https://codeburst.io/svg-morphing-the-easy-way-and-the-hard-way-c117a620b65f</a>
</h2>
<h3>
  SVGs using strokes/lines only (<a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>)
</h3>
<svg id="cups1" width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
  <!-- export1.svg (smiley) -->
  <path id="simple-cup1" d="M21.9 7.5q.4-.8.35-1.3-.15-.9-1.2-1.1l-.6.2q-.6.2-.8.45-.25.6-.45.85-.7.3-1 .5-.4.35-.4 1.45v1.9q.1 1.1.4 1.4.4.4 1.1.4 1 .2 1.5-.35.3-.3.4-.8.05-.1.1-1 0-1.15.6-2.6m11.9.75v4q0 1.1.35 1.5.45.6 1.6.6 1.1-.1 1.8-.4.95-.5 1.15-1.4.05-1.1.15-1.65.05-.15.3-1 .15-.55.25-1.6.1-1-.2-1.45-.4-.55-1.2-.55-.45-.05-1.35.05-.9-.1-1.35-.05-.85.1-1.2.6-.3.35-.3 1.35M47.4 16q-.2.2-.95 1.6-.7 1.55-2.5 3.8-2.05 2.7-3.85 3.8-.95.5-1.1 1.05-.3.8.65 1.4.5.3 1.65.4l-15.55.05q-1.75-.1-3.2-.5-.9-.35-2.6-1.35-1.65-.9-2.55-1.75-.75-.7-1.8-2.2-1.1-1.6-1.75-2.25-.75-.75-.9-1.1-.15-.35-.15-.9 0-.65-.05-.95-.1-1.3-.9-1.5-.85-.25-1.35.65-.3.6-.3 1.6 0 1.35.35 2.15.35.75 1.55 1.95 1.1 1.25 2.15 2.85 1.1 1.65 1.7 2.1.6.45 2.05 1 1 .5 2.9 1.7 1.5.8 3.65 1.05 1.25.15 3.85.15h13.4q.15.5.05 1.25 0 .4-.1 1.2-.1 1.65.75 2.25.55.45 1.85.35 3.15-.1 3.8-1.65.2-.5.1-2.25.15-1.8.1-2.7 0-1.65-.95-2.45.3-.55 1.4-1.7.9-1 1.2-1.7.35-.85.35-2.2-.1-1.5-.1-2.25V16.9q-.15-1.25-1.2-1.55-.95-.15-1.65.65m-.25 5.6q.05-.4.4-.8.1-.15.25-.15.2 1.1-.6 2.35l-1.15 1.45q-.15.15-.3.15-.25.1-.7-.45.2-.3.85-.8l.35-.55q.15-.2.6-.5.05-.05.3-.7M45.7 29q.1.2.1.7v2.1q0 .85-.15 1.25H44.3v-3.8l.05-.35q.5-.25.55-.5.6.2.8.6Z" id="a" />
  <!-- export2.svg (shopping cart) -->
  <path style="display: none;" id="fancy-cup1" d="M34.75 27q-.85-.5-2.9.25-1.45.7-1.9 1.15-.65.75-.9 1.75-.35 1.35-.25 4.1.1 1.05.35 1.35.55.75 1.8.45 1.45-.35 3-2.2 2.35-3.05...

JavaScript

// Lines only
var svg1 = document.getElementById("cups1");
var s1 = Snap(svg1);

var simpleCup1 = Snap.select('#simple-cup1');
var fancyCup1 = Snap.select('#fancy-cup1');

var simpleCupPoints1 = simpleCup1.node.getAttribute('d');
var fancyCupPoints1 = fancyCup1.node.getAttribute('d');

var toFancy1 = function() {
  simpleCup1.animate({
    d: fancyCupPoints1
  }, 1000, mina.backout, toSimple1);
}

var toSimple1 = function() {
  simpleCup1.animate({
    d: simpleCupPoints1
  }, 1000, mina.backout, toFancy1);
}

//toSimple1();
toFancy1();

// ----------------
// SVG files with "painbucket fills" instead of actual lines/strokes
// ----------------

var svg2 = document.getElementById("cups2");
var s2 = Snap(svg2);

var simpleCup2 = Snap.select('#simple-cup2');
var fancyCup2 = Snap.select('#fancy-cup2');

var simpleCupPoints2 = simpleCup2.node.getAttribute('d');
var fancyCupPoints2 = fancyCup2.node.getAttribute('d');

var toFancy2 = function() {
  simpleCup2.animate({
    d: fancyCupPoints2
  }, 1000, mina.backout, toSimple2);
}

var toSimple2 = function() {
  simpleCup2.animate({
    d: simpleCupPoints2
  }, 1000, mina.backout, toFancy2);
}

//toSimple2();
toFancy2();