My workaround others might find useful in the future for manually bundling
.svginto a compass plugin.
- In Sketch:
Right-click➡️Copy SVG - Paste SVG code into https://yoksel.github.io/url-encoder/ for
background-imageCSS prop - Copy that CSS into your less like so
.icon-export {
height: 12px;
width: 12px;
display: block;
background-image: url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Symbols' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'%3E%3Cg id='Icons-/-Export' transform='translate(-4.000000, -3.000000)' fill='%23494747'%3E%3Cg id='Icon' transform='translate(4.000000, 3.500000)'%3E%3Cpath d='M6.2777,0 L8.8,2.5223 C8.8,3.2415132 8.8,3.78074648 8.8,4.13999987 C8.8,4.3593827 8.8,5.03623299 8.8,5.7224982 C8.8,6.35273364 8.8,6.99090941 8.8,7.28999996 C8.8,7.80644 8.8,8.67644001 8.8,9.9 C8.8,10.5072 8.3072,11 7.7,11 L1.1,11 C0.49335,11 0,10.5072 0,9.9 L0,1.1 C0,0.4939 0.49335,0 1.1,0 L6.2777,0 Z M7.70005545,4 C7.70003697,3.77478974 7.70001848,3.54145641 7.7,3.3 L5.5,3.3 L5.5,1.1 L1.1,1.1 L1.1,9.9 L7.70055,9.9 L7.70035031,7.5 L8.79999983,7.5 L8.79999983,4 L7.70005491,4 Z M7.70005545,4 C7.70005931,4.04702072 7.70006317,4.09368734 7.70006703,4.13999987 C7.70009571,4.48417772 7.70014216,5.03201886 7.70019082,5.60623096 C7.70024165,6.20608089 7.7002949,6.83470922 7.70033284,7.28999996 L7.70035031,7.5 L7.69999981,4 Z' id='File' /%3E%3Cg id='Arrow' transform='translate(4.000000, 3.000000)'%3E%3Crect id='Rectangle' x='0.5' y='2.25' width='6' height='1' /%3E%3Cpolygon id='Triangle' transform='translate(7.000000, 2.750000) rotate(-270.000000) translate(-7.000000, -2.750000)' points='7 1.875 9 3.625 5 3.625' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}.icon-view {
height: 12px;
width: 12px;
display: block;
background-image: url("data:image/svg+xml,%0A%3Csvg width='13px' height='12px' viewBox='0 0 13 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Design-14' transform='translate(-336.000000, -365.000000)'%3E%3Cg id='Icon-/-View' transform='translate(337.000000, 366.000000)'%3E%3Cg id='Group-1360' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.86363636,2.04545455 C8.86363636,3.05 6.93,3.86363636 4.54545455,3.86363636 C2.16090909,3.86363636 0.227272727,3.05 0.227272727,2.04545455 C0.227272727,1.04181818 2.16090909,0.227272727 4.54545455,0.227272727 C6.93,0.227272727 8.86363636,1.04181818 8.86363636,2.04545455 L8.86363636,2.04545455 Z' id='Stroke-4953'%3E%3C/path%3E%3Cpath d='M3.87099403,5.65977545 C1.80671124,5.52347878 0.227272727,4.77152703 0.227272727,3.86363636' id='Stroke-4954'%3E%3C/path%3E%3Cpath d='M3.26827777,7.64585965 C1.5072225,7.4165883 0.227272727,6.72601497 0.227272727,5.90918182' id='Stroke-4955'%3E%3C/path%3E%3Cpath d='M3.22999516,9.68659475 C1.48858238,9.45240831 0.227272727,8.7653449 0.227272727,7.95431818 L0.227272727,2.04522727' id='Stroke-4956'%3E%3C/path%3E%3Cpath d='M8.86363636,2.04545455 L8.86363636,4.45483398' id='Stroke-4957'%3E%3C/path%3E%3C/g%3E%3Cpath d='M8,5.5 C6.40909091,5.5 5.05045455,6.48954545 4.5,7.88636364 C5.05045455,9.28318182 6.40909091,10.2727273 8,10.2727273 C9.59090909,10.2727273 10.9495455,9.28318182 11.5,7.88636364 C10.9495455,6.48954545 9.59090909,5.5 8,5.5 L8,5.5 Z M8,9.47727273 C7.12181818,9.47727273 6.40909091,8.76454545 6.40909091,7.88636364 C6.40909091,7.00818182 7.12181818,6.29545455 8,6.29545455 C8.87818182,6.29545455 9.59090909,7.00818182 9.59090909,7.88636364 C9.59090909,8.76454545 8.87818182,9.47727273 8,9.47727273 L8,9.47727273 Z M8,6.93181818 C7.47181818,6.93181818 7.04545455,7.35818182 7.04545455,7.88636364 C7.04545455,8.41454545 7.47181818,8.84090909 8,8.84090909 C8.52818182,8.84090909 8.95454545,8.41454545 8.95454545,7.88636364 C8.95454545,7.35818182 8.52818182,6.93181818 8,6.93181818 L8,6.93181818 Z' id='Shape' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
hello