JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<svg id="arrow-down" viewBox="0 0 14 8" fill="red">
		<path d="M6.99974 5.17168L11.9497 0.22168L13.3637 1.63568L6.99974 7.99968L0.635742 1.63568L2.04974 0.22168L6.99974 5.17168Z" fill="#FAFAFA"></path>
</svg>
<svg>
  <polyline points="125 60 150 20 175 60" stroke="red" stroke-width="20" fill="red" stroke-linejoin="miter" />
</svg>
<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" version="1.1">
	  <polyline points="5 5 45 45 95 5"  stroke-width="20" fill="none" stroke-linejoin="miter"></polyline>
	</svg>
  <svg class="scroll-icon-img" role="img" width="14" height="8">
  <use class="bI" xlink:href="https://alt-print.site/wp-content/themes/altprint/img/socials.svg#arrow-down"></use>
  </svg>

CSS

body {
  background: orange;
}
svg {
  border: 2px double red;
}
svg, path {
  stroke: #00f;
  fill: #0f0;
  /*stroke: #0f0;
  width:100px;*/
}
.bI {
  stroke: #00f;
}