feat(controls): Add react versions of existing media control icons

src/lib/viewers/controls/icons/IconGear24.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+function IconGear24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable={false} height={24} width={24} {...props}>
+            <path
+                d="M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-1l-.4-2.7c.1-.2-.2-.4-.4-.4h-4c-.2 0-.5.2-.5.4l-.4 2.7c-.6.2-1.1.6-1.7 1l-2.5-1c-.2-.1-.4 0-.6.2l-2 3.5c-.1.1 0 .4.2.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.3.3.6.2l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.2.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
+                fill="#fff"
+            />
+        </svg>
+    );
+}
+
+export default IconGear24;

src/lib/viewers/controls/icons/IconPause24.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+function IconPause24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg fill="#fff" focusable={false} height={24} width={24} {...props}>
+            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+            <path d="M0 0h24v24H0z" fill="none" />
+        </svg>
+    );
+}
+
+export default IconPause24;

src/lib/viewers/controls/icons/IconPlay24.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+function IconPlay24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg fill="#fff" focusable={false} height={24} width={24} {...props}>
+            <path d="M8 5v14l11-7z" />
+            <path d="M0 0h24v24H0z" fill="none" />
+        </svg>
+    );
+}
+
+export default IconPlay24;

src/lib/viewers/controls/icons/IconVolumeHigh24.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function IconVolumeHigh24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable={false} height={24} viewBox="-3 5 24 24" width={24} {...props}>
+            <path d="M0 14v6h4l5 5V9l-5 5H0z" fill="#FFF" />
+            <path
+                d="M13.5 17c0-1.8-1-3.3-2.5-4v8c1.5-.7 2.5-2.2 2.5-4zM11 8.2v2.1c2.9.9 5 3.5 5 6.7s-2.1 5.9-5 6.7v2.1c4-.9 7-4.5 7-8.8s-3-7.9-7-8.8z"
+                fill="#FFF"
+            />
+        </svg>
+    );
+}
+
+export default IconVolumeHigh24;

src/lib/viewers/controls/icons/IconVolumeLow24.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+function IconVolumeLow24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable={false} height={24} viewBox="-3 5 24 24" width={24} {...props}>
+            <path d="M0 14v6h4l5 5V9l-5 5H0z" fill="#FFF" />
+            <path d="M-3 5h24v24H-3V5z" fill="none" />
+        </svg>
+    );
+}
+
+export default IconVolumeLow24;

src/lib/viewers/controls/icons/IconVolumeMedium24.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+function IconVolumeMedium24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable={false} height={24} viewBox="-3 5 24 24" width={24} {...props}>
+            <path d="M0 14v6h4l5 5V9l-5 5H0z" fill="#FFF" />
+            <path d="M13.5 17c0-1.8-1-3.3-2.5-4v8c1.5-.7 2.5-2.2 2.5-4z" fill="#FFF" />
+        </svg>
+    );
+}
+
+export default IconVolumeMedium24;

src/lib/viewers/controls/icons/IconVolumeMute24.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+function IconVolumeMute24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable={false} height={24} viewBox="-3 5 24 24" width={24} {...props}>
+            <path d="M0 14v6h4l5 5V9l-5 5H0z" fill="#FFF" />
+            <path d="M15.5 20.2l-2-2-2 2-1.2-1.2 2-2-2-2 1.2-1.2 2 2 2-2 1.2 1.2-2 2 2 2" fill="#fff" />
+        </svg>
+    );
+}
+
+export default IconVolumeMute24;