JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

CSS

svg {
    border: 3px solid #ccc;
}
#0{
  background-color: #ccc;  
}

JavaScript

function arrow(direction){ 
    return "<?xml version='1.0' encoding='utf-8'?><!-- Generated by IcoMoon.io --><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg  version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30' height='30' viewBox='0 0 32 32' ><g transform='rotate("+direction+" 15 15)'>	<path d='M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828 0.781 0.781 2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z' fill='#000000' / ></g></svg>";
}
arrow_up = arrow(0);
arrow_45 = arrow(45);
arrow_right = arrow(90);
arrow_lu = arrow(315);
arrow_left = arrow(270);
$("body").append(arrow_left);
$("body").append(arrow_lu);
$("body").append(arrow_up);
$("body").append(arrow_45);
$("body").append(arrow_right);