use svg instead of base-64 png

src/icons.ts

@@ -1,11 +1,11 @@
 // https://materialdesignicons.com/
 export const pause =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAAAL0lEQVRIx2NgGAXDHjDikftPQC0heQYGBgYGJlr7YNSCUQtGLRi1YDBYMApGAAAAlTUCHI/K8qMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDgtMTNUMTM6MDQ6MTMrMDA6MDBoF1fHAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA4LTEzVDEzOjA0OjEzKzAwOjAwGUrvewAAAABJRU5ErkJggg==';
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause</title><path d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>';
 export const play =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAAAiklEQVRIx+3TsRFBURSE4Y8RGakSUAGRXCdaeD3oQAuaoAQaoAOhzFzRnRG8zN2RvJ3Z8Ow/58xZBg3CAdMkoOCOXRJQfcI8CSh4Yo9RClB9xjIJKHihwyQFqL5i3Tc8bnTGBbapDS5YJU7U7Jv6wpv24Tv4IdDogjeOmLUOhxs2ieCqn0o06P/6AEU0QyVw/swiAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA4LTEzVDEzOjA0OjAyKzAwOjAwAspc7QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOC0xM1QxMzowNDowMiswMDowMHOX5FEAAAAASUVORK5CYII=';
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play</title><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>';
 export const reload =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAABRElEQVRIx+3VP0oDURAG8J9iowaCkCP4B0ErGy1io17Bg9hYGrGy0kIL9QA2khtIIt5B7a1VMGIlxGJnzRo0u5u0+WB4b3nffDM7vJnHGCNiB1d4wkfYIy6xPYrwIu7QzbE2FsqKb+I1BJ6xhyXMoYoNNDKcV9TLZJ46XqMygFvDTXBfMF8kQFqWa0wU4E+hGT6tPPJOpiyVPHIGlfDpYqv/cDKz3431VHJbiuIDZ30af+IpslgqIZ5iNXwfB5E6QaoOEWA6fDuDStSN9auEcCP8PuO7otcjR/+VaL1k9mmQrB3/RbyKw4MhSpQNcvIfaVuvM2tDBjmX0z/tCHIjaaI8TBbg/MKC3qhoYnYAt4bbyLwU6pLZknb1PlYwI7klazjEW3DeFZxD/X/Skj+u77FcVjyLLVzgQdJEndhfGPHBGeMH388+ZOzhrnnmAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA4LTEzVDEzOjA0OjUxKzAwOjAwe8JIFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOC0xM1QxMzowNDo1MSswMDowMAqf8KgAAAAASUVORK5CYII=';
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>reload</title><path d="M2 12C2 16.97 6.03 21 11 21C13.39 21 15.68 20.06 17.4 18.4L15.9 16.9C14.63 18.25 12.86 19 11 19C4.76 19 1.64 11.46 6.05 7.05C10.46 2.64 18 5.77 18 12H15L19 16H19.1L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z" /></svg>';
 export const skipBackward =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAAAcElEQVRIx+2QsQ6AMAgFiXHxi11Z/eKOujhgU/Bg1L6E6ZK7piJzv9x5nzctMhTQIkMBLTIUsIIMQ4FeQBkKjASEoYAneGOPLUGoFVnqi/bglRHDAU9EGA6MRJThQC/KMBywIsxWUjQ7RGQrsLkv7wJ0tm5fRRXwUAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wOC0xM1QxMzowNDozNCswMDowMO+VbjQAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDgtMTNUMTM6MDQ6MzQrMDA6MDCeyNaIAAAAAElFTkSuQmCC';
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>skip-backward</title><path d="M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12" /></svg>';
 export const skipForward =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAAAbElEQVRIx+2QMQqAMBAEF/HPlmfpk+1io6ASzdyWmoGrBnZCpM4vWUxX9mtSXoZaDgeehojDgdoQcanAfYi4dOA8RNyFkRQlTZJWw2mAgeOFjkNfFAmXDkTSpQJhOBwI06FAmA4FZtPhQOdjbBsnZOWA27+iAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA4LTEzVDEzOjA0OjI4KzAwOjAw5J8E3gAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOC0xM1QxMzowNDoyOCswMDowMJXCvGIAAAAASUVORK5CYII=';
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>skip-forward</title><path d="M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12" /></svg>';

src/index.ts

@@ -15,9 +15,9 @@ type ContainerOptions = {
 	onSliderValueChange: () => void;
 };
 
-const makeImg = (icon: string): HTMLImageElement => {
+const makeImg = (svg: string): HTMLImageElement => {
 	const img = document.createElement('img');
-	img.src = icon;
+	img.src = `data:image/svg+xml,${encodeURIComponent(svg)}`;
 	return img;
 };