JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"><symbol viewBox="0 0 280 280" id="completed-copy-filled"><title>completed-copy-filled</title> <path d="M245,24.5h-21v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H98v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H35
	c-17.5,0-31.5,14-31.5,31.5v189c0,17.5,14,31.5,31.5,31.5h210c17.5,0,31.5-14,31.5-31.5V56C276.5,38.5,262.5,24.5,245,24.5z
	 M255.5,245c0,5.8-4.7,10.5-10.5,10.5H35c-5.8,0-10.5-4.7-10.5-10.5V87.5h229.8L255.5,245L255.5,245z"/> <g> <path d="M77,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5S66.5,8.2,66.5,14v31.5C66.5,52.5,71.2,56,77,56z"/> <path d="M203,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5S192.5,8.2,192.5,14v31.5C192.5,52.5,197.2,56,203,56z"/> </g> <g> <polygon points="198.3,120.2 191.3,114.3 186.7,119 173.8,130.7 171.5,134.2 159.8,145.8 148.2,157.5 135.3,169.2 123.7,182 
		112,193.7 92.2,172.7 86.3,168 79.3,173.8 68.8,184.3 79.3,194.8 92.2,207.7 103.8,219.3 112,227.5 122.5,217 129.5,210 
		134.2,205.3 147,193.7 158.7,182 170.3,169.2 186.7,152.8 198.3,141.2 208.8,130.7 	"/> </g> </symbol><symbol viewBox="0 0 280 280" id="completed-copy-stroked-classes"><title>completed-copy-stroked-classes</title> <g> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M245,24.5h-21v21c0,11.7-9.3,21-21,21c-11.7,0-21-9.3-21-21v-21H98
		v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H35c-17.5,0-31.5,14-31.5,31.5v189c0,17.5,14,31.5,31.5,31.5h210
		c17.5,0,31.5-14,31.5-31.5V56C276.5,38.5,262.5,24.5,245,24.5z M255.5,245c0,5.8-4.7,10.5-10.5,10.5H35c-5.8,0-10.5-4.7-10.5-10.5
		V87.5h229.8L255.5,245L255.5,245z"/> <path class="ibestrokin" fill="none" stroke="#000000" stroke-miterlimit="10" d="M77,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5
		c-5.8,0-10.5,4.7-10.5,10.5v31.5C66.5,52.5,71.2,56,77,56z"/> <path class="ibestrokin" fill="none" stroke="#000000" stroke-miterlimit="10"...

CSS

//Point 1. stroked instance is no longer styleable from instance
.stroked-instance {
  stroke: green;//nothing happens
  fill: red;//nada
}

//Point 2. but is from filled instance. Also, we can still apply a stroke
.filled-instance {
  stroke: #cc8ac1;
  stroke-width: 5px;
  fill: lighten(#cc8ac1, 20%);
}

//Point 3. You can always achieve an outlined effect by simply "turning off" the fill
.filled-instance-off {
  stroke: #d08aaf;
  stroke-width: 5px;
  fill: transparent;
}

//Point 4. If you want to apply stroke via CSS to the SVG exported with stroke and no fill, you have to target the shapes/paths within the source SVG in the defintion
symbol#completed-copy-stroked [stroke] {
  stroke: #dd6435;
  stroke-width: 5px;
}

//Point 5. You can also just add classes within the source SVG and apply CSS to those directly.
.ibestrokin {
  stroke: red;
  stroke-width: 5px;
  fill: red;
}
.istrokeittotheeast {
  stroke: green;
  stroke-width: 7px;
}


//Point 6. Although we can override fill/stroke attributes from CSS if we apply that CSS directly to the definition, we cannot do via CSS applied to the instance
.hand-filled-instance {
  fill: cyan; // the hard coded fill="red" path won't get affected by this!!!
              //Note it doesn't matter if it's black fill="#000"...the black would remain
  stroke: darken(red, 10%);
  stroke-width: 5px;
}

JavaScript

// SVG synbols and USE