JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<h2>svg</h2>
<div class="test-1">
  <svg viewBox="0 0 16 13" id="ico-twitter-share"><path d="M15.56.24a6.61 6.61 0 0 1-2.087.797A3.283 3.283 0 0 0 7.88 4.03 9.316 9.316 0 0 1 1.115.6 3.28 3.28 0 0 0 2.13 4.982 3.283 3.283 0 0 1 .645 4.57v.04a3.287 3.287 0 0 0 2.632 3.22 3.312 3.312 0 0 1-1.482.056 3.286 3.286 0 0 0 3.065 2.28A6.587 6.587 0 0 1 .782 11.57c-.265 0-.526-.015-.783-.045A9.292 9.292 0 0 0 5.03 13c6.037 0 9.338-5.002 9.338-9.34l-.01-.425A6.6 6.6 0 0 0 16 1.538c-.59.26-1.22.438-1.884.517A3.3 3.3 0 0 0 15.56.24z"/></svg>
</div>

<div class="test-2">
  <svg viewBox="0 0 16 13" id="ico-twitter-share"><path d="M15.56.24a6.61 6.61 0 0 1-2.087.797A3.283 3.283 0 0 0 7.88 4.03 9.316 9.316 0 0 1 1.115.6 3.28 3.28 0 0 0 2.13 4.982 3.283 3.283 0 0 1 .645 4.57v.04a3.287 3.287 0 0 0 2.632 3.22 3.312 3.312 0 0 1-1.482.056 3.286 3.286 0 0 0 3.065 2.28A6.587 6.587 0 0 1 .782 11.57c-.265 0-.526-.015-.783-.045A9.292 9.292 0 0 0 5.03 13c6.037 0 9.338-5.002 9.338-9.34l-.01-.425A6.6 6.6 0 0 0 16 1.538c-.59.26-1.22.438-1.884.517A3.3 3.3 0 0 0 15.56.24z"/></svg>
</div>

<div class="test-3">
  <svg viewBox="0 0 16 13" id="ico-twitter-share"><path d="M15.56.24a6.61 6.61 0 0 1-2.087.797A3.283 3.283 0 0 0 7.88 4.03 9.316 9.316 0 0 1 1.115.6 3.28 3.28 0 0 0 2.13 4.982 3.283 3.283 0 0 1 .645 4.57v.04a3.287 3.287 0 0 0 2.632 3.22 3.312 3.312 0 0 1-1.482.056 3.286 3.286 0 0 0 3.065 2.28A6.587 6.587 0 0 1 .782 11.57c-.265 0-.526-.015-.783-.045A9.292 9.292 0 0 0 5.03 13c6.037 0 9.338-5.002 9.338-9.34l-.01-.425A6.6 6.6 0 0 0 16 1.538c-.59.26-1.22.438-1.884.517A3.3 3.3 0 0 0 15.56.24z"/></svg>
</div>

<div class="test-1">
   <svg><use xlink:href="#ico-twitter-share"></use></svg>
</div>

<div class="test-2">
   <svg><use xlink:href="#ico-twitter-share"></use></svg>
</div>

<div class="test-3">
  <svg><use xlink:href="#ico-twitter-share"></use></svg>
</div>


<div class="test-1 fix">
  <svg viewBox="0 0 16 13" id="ico-twitter-share"><path d="M15.56.24a6.61 6.61 0 0 1-2.087.797A3.283 3.283 0...

CSS

div {width: 50px; height: 50px; position: relative; background:tomato; margin:10px;}
div > * {position: absolute; top:50%; left:50%; width: 20px; height: 20px;}
span {display: block; background:black;}

.test-1 * {transform:translate(-50%, -50%);}
.test-2 * {transform:translate(-10px, -10px);}
.test-3 * {margin:-10px 0 0 -10px;}

.test-1.fix > * {transform:translate(-50%, -50%);}
.test-2.fix > * {transform:translate(-10px, -10px);}
.test-3.fix > * {margin:-10px 0 0 -10px;}