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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+function IconFullscreenIn24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
+            <g fill="none" fillRule="evenodd">
+                <path
+                    d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 3v6l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm11.41 12.83l2.89 2.87L15 21h6v-6l-2.3 2.3-2.87-2.89-1.42 1.42zM5.3 17.3L3 15v6h6l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3z"
+                    fill="#fff"
+                />
+                <path d="M0 0h24v24H0z" />
+            </g>
+        </svg>
+    );
+}
+
+export default IconFullscreenIn24;

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+function IconFullscreenOut24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
+            <g fill="none" fillRule="evenodd">
+                <path d="M0 0h24v24H0z" />
+                <path
+                    d="M19.58 3l-2.87 2.89-2.3-2.3v6h6l-2.3-2.3L21 4.42 19.58 3zM4.42 3L3 4.42l2.89 2.87-2.3 2.3h6v-6l-2.3 2.3L4.42 3zm9.99 11.41v6l2.3-2.3L19.58 21 21 19.58l-2.89-2.87 2.3-2.3h-6zm-10.82 0l2.3 2.3L3 19.58 4.42 21l2.87-2.89 2.3 2.3v-6h-6z"
+                    fill="#fff"
+                />
+            </g>
+        </svg>
+    );
+}
+
+export default IconFullscreenOut24;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+function IconHighlightText(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={16} viewBox="0 0 16 16" width={16} {...props}>
+            <path
+                d="M5.75 1a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25H4v12h1.75a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-4.5a.25.25 0 0 1-.25-.25v-.5a.25.25 0 0 1 .25-.25H3V2H1.25A.25.25 0 0 1 1 1.75v-.5A.25.25 0 0 1 1.25 1h4.5zM13 4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5.75a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1H13zm-2.78 1.5a2.83 2.83 0 0 0-1.991.763l.206.372a.53.53 0 0 0 .136.148.33.33 0 0 0 .206.064.5.5 0 0 0 .255-.066l.255-.148c.093-.055.202-.104.325-.148s.278-.066.465-.066c.26 0 .456.078.593.233s.206.395.206.72v.283c-.548.013-1.006.066-1.374.16s-.662.213-.883.356-.38.303-.474.48S8 9.008 8 9.2c0 .217.034.407.103.57a1.11 1.11 0 0 0 .29.41 1.23 1.23 0 0 0 .444.247c.17.055.358.082.56.082.17 0 .328-.014.47-.042a1.83 1.83 0 0 0 .4-.127c.125-.057.245-.126.36-.2a4.18 4.18 0 0 0 .355-.29l.103.344c.034.1.08.167.14.2s.143.05.252.05H12V7.37a2.29 2.29 0 0 0-.119-.754c-.08-.23-.195-.426-.348-.59a1.59 1.59 0 0 0-.561-.386 1.93 1.93 0 0 0-.752-.139zm.654 2.86v.815c-.165.176-.334.307-.507.393a1.36 1.36 0 0 1-.614.13c-.193 0-.35-.044-.47-.132s-.18-.234-.18-.438c0-.104.03-.2.09-.287a.72.72 0 0 1 .294-.231c.137-.066.32-.12.544-.163a6.27 6.27 0 0 1 .843-.087z"
+                fillRule="evenodd"
+            />
+        </svg>
+    );
+}
+
+export default IconHighlightText;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+function IconRegion(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={24} viewBox="0 0 18 18" width={24} {...props}>
+            <path
+                d="m7.5815 7c2.3901 0 4.4185 1.9375 4.4185 4.3276 0 2.3901-2.0285 4.3276-4.4185 4.3276h-1.1269l-2.4545 1.3447c-0.27724 0.11784-0.8387-0.0093928-0.95654-0.28664-0.02868-0.067478-0.043462-0.14004-0.043462-0.21336l-0.0012948-1.7378c-0.99636-0.79285-1.9987-2.0623-1.9987-3.4346 0-2.3901 1.9375-4.3276 4.3276-4.3276h2.2538zm-1.1283 2.2727c-0.19331 0-0.3544 0.15893-0.3544 0.34435v1.5761h-1.5653c-0.18257 0-0.35172 0.16158-0.35172 0.3523 0 0.19337 0.16915 0.3523 0.35172 0.3523h1.5653v1.5761c0 0.18012 0.16109 0.34435 0.3544 0.34435 0.19599 0 0.35709-0.16423 0.35709-0.34435v-1.5761h1.5653c0.18794 0 0.35172-0.15893 0.35172-0.3523 0-0.19072-0.16378-0.3523-0.35172-0.3523h-1.5653v-1.5761c0-0.18542-0.16109-0.34435-0.35709-0.34435zm7.7968-7.0227c1.4625 0 2.6584 1.1417 2.745 2.5825l0.0050188 0.16752v4c0 1.4625-1.1417 2.6584-2.5825 2.745l-0.16752 0.0050188h-0.75c-0.41421 0-0.75-0.33579-0.75-0.75 0-0.3797 0.28215-0.69349 0.64823-0.74315l0.10177-0.0068466h0.75c0.64721 0 1.1795-0.49187 1.2435-1.1222l0.0064536-0.12781v-4c0-0.64721-0.49187-1.1795-1.1222-1.2435l-0.12781-0.0064536h-7.25c-0.64721 0-1.1795 0.49187-1.2435 1.1222l-0.0064536 0.12781v0.25c0 0.41421-0.33579 0.75-0.75 0.75-0.3797 0-0.69349-0.28215-0.74315-0.64823l-0.0068466-0.10177v-0.25c0-1.4625 1.1417-2.6584 2.5825-2.745l0.16752-0.0050188h7.25z"
+                fillRule="nonzero"
+            />
+        </svg>
+    );
+}
+
+export default IconRegion;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+function IconRotate24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg fill="#fff" focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z" />
+        </svg>
+    );
+}
+
+export default IconRotate24;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+function IconSearch(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={18} viewBox="0 0 15 14" width={18} {...props}>
+            <g fill="none" fillRule="evenodd">
+                <path d="M-2-3h20v20H-2z" />
+                <path
+                    className="icon"
+                    d="M6.931 0a5.994 5.994 0 0 1 4.907 9.438l2.806 2.807a1 1 0 0 1 0 1.415l-.047.047a1 1 0 0 1-1.414 0L10.375 10.9A5.994 5.994 0 1 1 6.931 0zm0 1.998a3.996 3.996 0 1 0 0 7.992 3.996 3.996 0 0 0 0-7.992z"
+                    fill="#FFF"
+                />
+            </g>
+        </svg>
+    );
+}
+
+export default IconSearch;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function IconThumbnailsToggle(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={18} viewBox="0 0 18 18" width={18} {...props}>
+            <path
+                d="M15 18H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM3 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"
+                fill="#fff"
+            />
+            <path d="M3 4h3v2H3zm0 4h3v2H3zm0 4h3v2H3z" fill="#fff" />
+        </svg>
+    );
+}
+
+export default IconThumbnailsToggle;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function IconZoomIn(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={10} viewBox="0 0 10 10" width={10} {...props}>
+            <path
+                d="M5 0c.552 0 1 .456 1 .995V4h3.005c.51 0 .93.383.988.883L10 5c0 .552-.456 1-.995 1H6v3.005c0 .51-.383.93-.883.988L5 10c-.552 0-1-.456-1-.995V6H.995A.995.995 0 010 5c0-.552.456-1 .995-1H4V.995c0-.51.383-.93.883-.988L5 0z"
+                fill="#FFF"
+                fillRule="evenodd"
+            />
+        </svg>
+    );
+}
+
+export default IconZoomIn;

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+function IconZoomOut(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg focusable="false" height={10} viewBox="0 0 10 10" width={10} {...props}>
+            <rect fill="#FFF" fillRule="evenodd" height={2} rx={1} width={10} y={5} />
+        </svg>
+    );
+}
+
+export default IconZoomOut;