Extract octicons to components

extensions/ql-vscode/src/view/results/octicons.tsx

@@ -1,4 +1,14 @@
 import * as React from "react";
+import { styled } from "styled-components";
+
+const Octicon = styled.svg`
+  fill: var(--vscode-editor-foreground);
+  margin-top: 0.25em;
+`;
+
+const OcticonLight = styled(Octicon)`
+  opacity: 0.6;
+`;
 
 /**
  * These icons come from https://github.com/microsoft/vscode-icons
@@ -6,8 +16,7 @@ import * as React from "react";
  * file in this directory.
  */
 export const chevronDown = (
-  <svg
-    className="octicon"
+  <Octicon
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -19,12 +28,11 @@ export const chevronDown = (
       clipRule="evenodd"
       d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.62-.618 4.356 4.357z"
     />
-  </svg>
+  </Octicon>
 );
 
 export const chevronRight = (
-  <svg
-    className="octicon"
+  <Octicon
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -32,12 +40,11 @@ export const chevronRight = (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5 5v.7l-5 5z" />
-  </svg>
+  </Octicon>
 );
 
 export const listUnordered = (
-  <svg
-    className="octicon octicon-light"
+  <OcticonLight
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -49,12 +56,11 @@ export const listUnordered = (
       clipRule="evenodd"
       d="M2 3H1v1h1V3zm0 3H1v1h1V6zM1 9h1v1H1V9zm1 3H1v1h1v-1zm2-9h11v1H4V3zm11 3H4v1h11V6zM4 9h11v1H4V9zm11 3H4v1h11v-1z"
     />
-  </svg>
+  </OcticonLight>
 );
 
 export const info = (
-  <svg
-    className="octicon octicon-light"
+  <OcticonLight
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -66,5 +72,5 @@ export const info = (
       clipRule="evenodd"
       d="M8.568 1.03a6.8 6.8 0 0 1 4.192 2.02 7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.15zm.472 12.85a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM8.51 7h-1v4h1V7zm0-2h-1v1h1V5z"
     />
-  </svg>
+  </OcticonLight>
 );

extensions/ql-vscode/src/view/results/resultsView.css

@@ -144,12 +144,3 @@ td.vscode-codeql__path-index-cell {
 .vscode-codeql__location-cell {
   text-align: right !important;
 }
-
-.octicon {
-  fill: var(--vscode-editor-foreground);
-  margin-top: 0.25em;
-}
-
-.octicon-light {
-  opacity: 0.6;
-}