JSFiddle - React, Tailwind, and code Playground

by Ryan Rutkin

HTML

<div class="row" >
    <div class="row-item pointer" >Checkmark →</div>
    <i class="row-item" svg-include="checkmark" />
</div>

CSS

.row {
    white-space: nowrap;
    width: 90%;
    height: auto;
    padding: 6px 8px 6px 8px;
    border-radius: 8px;
    border: 1px solid #DDDDDD;
    margin: 1% auto 0px auto;
}

.row-item {
    display: inline-block;
    width: 50%;
    height: 26px;
    line-height: 20px;
    vertical-align: middle;
    text-align: center;
}


.row-item:first-child {
    border-right: 1px solid #DDDDDD;
}

JavaScript

var SvgIncludeSevice = {
	paths: [
				{
					name: "Checkmark",
					querySelector: '[svg-include~="checkmark"]',
					svg: 	'<svg' +
							   'xmlns:dc="http://purl.org/dc/elements/1.1/"' +
							   'xmlns:cc="http://creativecommons.org/ns#"' +
							   'xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"' +
							   'xmlns:svg="http://www.w3.org/2000/svg"' +
							   'xmlns="http://www.w3.org/2000/svg"' +
							   'xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"' +
							   'xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"' +
							   'width="22.19364"' +
							   'height="21.778702"' +
							   'id="svg2991"' +
							   'version="1.1"' +
							   'inkscape:version="0.48.5 r10040"' +
							   'sodipodi:docname="Checkmark">' +
							  '<defs' +
								 'id="defs2993" />' +
							  '<sodipodi:namedview' +
								 'id="base"' +
								 'pagecolor="#ffffff"' +
								 'bordercolor="#666666"' +
								 'borderopacity="1.0"' +
								 'inkscape:pageopacity="0.0"' +
								 'inkscape:pageshadow="2"' +
								 'inkscape:zoom="25.833333"' +
								 'inkscape:cx="12.697409"' +
								 'inkscape:cy="10.353175"' +
								 'inkscape:document-units="px"' +
								 'inkscape:current-layer="checkmark"' +
								 'showgrid="false"' +
								 'fit-margin-top="0"' +
								 'fit-margin-left="0"' +
								 'fit-margin-right="0"' +
								 'fit-margin-bottom="0"' +
								 'inkscape:window-width="1440"' +
								 'inkscape:window-height="837"' +
								 'inkscape:window-x="-8"' +
								 'inkscape:window-y="-8"' +
								 'inkscape:window-maximized="1" />' +
							  '<metadata' +
								 'id="metadata2996">' +
								'<rdf:RDF>' +
								  '<cc:Work' +
									 'rdf:about="">' +
									'<dc:format>image/svg+xml</dc:format>' +
									'<dc:type' +
									   'rdf:resource="http://purl.org/dc/dcmitype/StillImage" />' +
									'<dc:title></dc:title>' +
								  '</cc:Work>' +
								'</rdf:RDF>'...