Use Primer octicons where possible (#1156)

Author: charisk

extensions/ql-vscode/src/remote-queries/view/DownloadButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as octicons from '../../view/octicons';
 import styled from 'styled-components';
+import { DownloadIcon } from '@primer/octicons-react';
 
 const ButtonLink = styled.a`
   display: inline-block;
@@ -16,7 +16,7 @@ const ButtonLink = styled.a`
 
 const DownloadButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
   <ButtonLink onClick={onClick}>
-    {octicons.download}{text}
+    <DownloadIcon size={16} />{text}
   </ButtonLink>
 );
 

extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx

@@ -4,7 +4,6 @@ import * as Rdom from 'react-dom';
 import { ThemeProvider } from '@primer/react';
 import { ToRemoteQueriesMessage } from '../../pure/interface-types';
 import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
-import * as octicons from '../../view/octicons';
 
 import { vscode } from '../../view/vscode-api';
 
@@ -17,7 +16,7 @@ import DownloadButton from './DownloadButton';
 import { AnalysisResults } from '../shared/analysis-result';
 import DownloadSpinner from './DownloadSpinner';
 import CollapsibleItem from './CollapsibleItem';
-import { FileSymlinkFileIcon } from '@primer/octicons-react';
+import { CodeSquareIcon, FileIcon, FileSymlinkFileIcon, RepoIcon } from '@primer/octicons-react';
 
 const numOfReposInContractedMode = 10;
 
@@ -78,12 +77,14 @@ const QueryInfo = (queryResult: RemoteQueryResult) => (
     {queryResult.totalResultCount} results from running against {queryResult.totalRepositoryCount} repositories
     ({queryResult.executionDuration}), {queryResult.executionTimestamp}
     <VerticalSpace size={1} />
-    <span className="vscode-codeql__query-file">{octicons.file}
+    <span className="vscode-codeql__query-file">
+      <FileIcon size={16} />
       <a className="vscode-codeql__query-file-link" href="#" onClick={() => openQueryFile(queryResult)}>
         {queryResult.queryFileName}
       </a>
     </span>
-    <span>{octicons.codeSquare}
+    <span>
+      <CodeSquareIcon size={16} />
       <a className="vscode-codeql__query-file-link" href="#" onClick={() => openQueryTextVirtualFile(queryResult)}>
         query
       </a>
@@ -155,7 +156,7 @@ const SummaryItem = ({
   analysisResults: AnalysisResults | undefined
 }) => (
   <span>
-    <span className="vscode-codeql__analysis-item">{octicons.repo}</span>
+    <span className="vscode-codeql__analysis-item"><RepoIcon size={16} /></span>
     <span className="vscode-codeql__analysis-item">{analysisSummary.nwo}</span>
     <span className="vscode-codeql__analysis-item"><Badge text={analysisSummary.resultCount.toString()} /></span>
     <span className="vscode-codeql__analysis-item">

extensions/ql-vscode/src/remote-queries/view/remoteQueries.css

@@ -1,15 +1,3 @@
-.octicon {
-  fill: var(--vscode-editor-foreground);
-  height: 1.2em;
-  width: 1.2em;
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.octicon-light {
-  opacity: 0.6;
-}
-
 .vscode-codeql__query-file {
   padding-right: 1em;
 }

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

@@ -20,23 +20,3 @@ export const listUnordered = <svg className="octicon octicon-light" width="16" h
 export const info = <svg className="octicon octicon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
   <path fillRule="evenodd" 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>;
-
-/**
- * The icons below come from https://primer.style/octicons/
- */
-
-export const file = <svg className="octicon octicon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
-</svg>;
-
-export const codeSquare = <svg className="octicon octicon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm9.22 3.72a.75.75 0 000 1.06L10.69 8 9.22 9.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM6.78 6.53a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 101.06-1.06L5.31 8l1.47-1.47z"></path>
-</svg>;
-
-export const repo = <svg className="octicon octicon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
-</svg>;
-
-export const download = <svg className="octicon octicon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path>
-</svg>;