JSFiddle - React, Tailwind, and code Playground

by kshep92

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">

<symbol id="ic_add_alert_24px" viewBox="0 0 24 24">
        <path fill="none" d="M0 0h24v24H0V0z"/><path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z"/>
</symbol>

<symbol id="ic_add_alert_48px" viewBox="0 0 48 48">
        <path fill="none" d="M0 0h48v48H0V0z"/><path d="M20.02 41.02c0 2.2 1.78 3.98 3.98 3.98s3.98-1.78 3.98-3.98h-7.96zm17.74-8.38V21c0-6.5-4.5-11.94-10.58-13.38V6.18C27.18 4.42 25.76 3 24 3s-3.18 1.42-3.18 3.18v1.44C14.74 9.06 10.24 14.5 10.24 21v11.64L6 36.88V39h36v-2.12l-4.24-4.24zM32 25.01h-6v6h-4v-6h-6V21h6v-6h4v6h6v4.01z"/>
</symbol>

<symbol id="ic_error_18px" viewBox="0 0 18 18">
        <path d="M0 0h18v18H0z" fill="none"/><path d="M9 1.03c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM10 13H8v-2h2v2zm0-3H8V5h2v5z"/>
</symbol>

<symbol id="ic_error_24px" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</symbol>

<symbol id="ic_error_36px" viewBox="0 0 36 36">
        <path d="M0 0h36v36H0z" fill="none"/><path d="M18 3C9.72 3 3 9.72 3 18s6.72 15 15 15c8.28 0 15-6.72 15-15S26.28 3 18 3zm1 22h-2v-2h2v2zm0-5h-2v-9h2v9z"/>
</symbol>

<symbol id="ic_error_48px" viewBox="0 0 48 48">
        <path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.96 4 4 12.95 4 24s8.96 20 20 20 20-8.95 20-20S35.04 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z"/>
</symbol>

<symbol id="ic_error_outline_24px" viewBox="0 0 24 24">
        <path fill="none" d="M0 0h24v24H0V0z"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48...

CSS

.icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  border: 1px solid;
}

.icon svg {
  fill: currentColor;
}

.ic_add_alert_48px.active {
  color: #64B5F6;
}

JavaScript

(function() {
	$(document).ready(function() {
  	console.clear();	
    var icons = $("span.icon");
    for(var i=0; i<icons.length; i++) {
    	var $svg = $("<svg></svg>");
      var $use = $("<use></use>");
      var $icon = $(icons[i]);
    	$svg.addClass("icon");
      //$svg.addClass($icon.data("href"));
      //$svg.attr("xmlns", "http://www.w3.org/2000/svg");
      //$svg.attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
      $use.attr("xlink:href", "#"+$icon.data("href"));
      $svg.append($use);
      $icon.html($svg.prop('outerHTML'));
      
    }
    
    $(".alert").on("click", function() {
    	$(this).toggleClass("active");
    });
  });

})();

 function alarm() {
			alert("BEEP BEEP BEEP!");
		}