From 1eccdd6f8a96bf3fe2c21bd7470758cc38b20b61 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Jan 2019 14:46:18 -0800
Subject: [PATCH] Moved search icon into separate React component

---
 src/devtools/views/Elements.css   |  7 -------
 src/devtools/views/Elements.js    | 16 ++--------------
 src/devtools/views/SearchIcon.css |  6 ++++++
 src/devtools/views/SearchIcon.js  | 22 ++++++++++++++++++++++
 4 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 src/devtools/views/SearchIcon.css
 create mode 100644 src/devtools/views/SearchIcon.js

diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index 0cd3d4480f..c08b644a4a 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -42,13 +42,6 @@
   color: var(--color-special02);
 }
 
-.IconButtonSVG {
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.25rem;
-  fill: currentColor;
-}
-
 .Tree {
   width: 100%;
   overflow: auto;
diff --git a/src/devtools/views/Elements.js b/src/devtools/views/Elements.js
index 7c184828f4..fa80446e53 100644
--- a/src/devtools/views/Elements.js
+++ b/src/devtools/views/Elements.js
@@ -4,6 +4,7 @@ import React, { useLayoutEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import Tree from './Tree';
 import { StoreContext, TreeContext } from './contexts';
+import SearchIcon from './SearchIcon';
 import styles from './Elements.css';
 
 import './root.css';
@@ -47,20 +48,7 @@ export default function Elements({ bridge, browserName, themeName }: Props) {
               placeholder="Search (text or /regex/)"
             />
             <button className={styles.IconButton}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className={styles.IconButtonSVG}
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-              >
-                <path d="M0 0h24v24H0z" fill="none" />
-                <path
-                  fill="currentColor"
-                  d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
-                />
-              </svg>
-              Select
+              <SearchIcon /> Select
             </button>
           </div>
           <div className={styles.Tree}>
diff --git a/src/devtools/views/SearchIcon.css b/src/devtools/views/SearchIcon.css
new file mode 100644
index 0000000000..a3ebe2def4
--- /dev/null
+++ b/src/devtools/views/SearchIcon.css
@@ -0,0 +1,6 @@
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  margin: 0 0.25rem;
+  fill: currentColor;
+}
diff --git a/src/devtools/views/SearchIcon.js b/src/devtools/views/SearchIcon.js
new file mode 100644
index 0000000000..1d4f63eb1f
--- /dev/null
+++ b/src/devtools/views/SearchIcon.js
@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react';
+import styles from './SearchIcon.css';
+
+export default function SearchIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.Icon}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        fill="currentColor"
+        d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
+      />
+    </svg>
+  );
+}