JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<svg id="MML---logo" class="shadow" viewBox="0 0 200 200">
  <switch>
    <foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" width="1" height="1" />
    <path d="M196.3 60.2v79.9c-.6.3-1.1.9-1.4 1.1-18.4 18.4-36.8 36.8-55.2 55.4H59.8c-.3-.6-.9-1.1-1.1-1.4l-22.1-22.1c-10.9-10.9-22.1-21.8-33-33V60.2c1.4-1.4 2.9-2.6 4.3-4C24.9 39.3 41.8 22 58.8 5.1c.3-.3.9-.9 1.1-1.4H140c.3.3.6.9.9 1.1 17.5 17.5 35.3 35 52.9 52.6.5 1.1 1.3 1.9 2.5 2.8zm-40.8 17.2c-11.2-11.2-22.1-22.4-32.7-33.3H77.4C65.8 55.3 54.9 66.2 44 77.1v45.7c11.2 11.2 22.1 22.1 32.7 33h45.7c11.2-11.2 22.1-22.1 33-32.8V77.4z"
    />
  </switch>
</svg>

CSS

#MML---logo {
  height: 100px;
  width: 100px;
}

#MML---logo path:hover  {
  fill: #000;
}

#MML---logo path {
  fill: #fff;
}

.shadow {
  -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.4));
  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.4));
}