JSFiddle - React, Tailwind, and code Playground

by Persijn Kwekkeboom

HTML

<!-- TEMPLATE1 -->
<svg class="hide">
    <rect id="rectangle-tmp" width="300" height="100" />
    <symbol id="amazing">
        <g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g>
    </symbol>
</svg>
<!-- Templates are hidden in css -->
<!-- USE TEMPLATE SEVERAL TIMES -->
You symbol size default:
<svg class="shape1">
    <use xlink:href="#amazing" />
</svg>
viewbox of 100, 100. Width =50px;
<svg class="shape3" viewBox="0 0 100 100">
    <use xlink:href="#amazing" />
</svg>
viewbox of 25, 25. Width = 30%; (is responsive)
<svg class="shape4" viewBox="0 0 25 25">
    <use xlink:href="#amazing" />
</svg>
You symbol size default width viewBox of 100,100:<br>
width = not set!
<svg class="shape2" viewBox="0 0 20 20">
    <use xlink:href="#amazing" />
</svg>

CSS

.hide {
    display: none;
}
.shape1 {
    display:block;
    /*THIS SIZE IS NOT USED SINCE NO VIEWPORT IS DEFINED!*/
    height: 30px;
}
.shape2 {
    display: block;
}
.shape3 {
    display: block;
    width: 50px;
}
.shape4 {
    display: block;
    width: 30%;
}