JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 44.4 29.8" style="enable-background:new 0 0 44.4 29.8;" xml:space="preserve">
	<path class="st1" d="M38.7,15.6H4.5c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h34.2c0.8,0,1.5,0.7,1.5,1.5S39.5,15.6,38.7,15.6z"/>

</svg>

CSS

.st1{
	  -ms-animation: filling 2s ease both;
    animation: filling 2s ease both;
	}
  
  @keyframes filling{
	0%{ fill: #ffffff; }
	100%{ fill: #000000; }
}

@-ms-keyframes filling{
	0%{ fill: #ffffff; }
	100%{ fill: #000000; }
}