Use Octicons v2 (#3147)20.5.27

8 files changed, 17 insertions, 8 deletions

diff --git a/octicon-svg-loader.ts b/octicon-svg-loader.ts
index 5931b845..91318488 100644
--- a/octicon-svg-loader.ts
+++ b/octicon-svg-loader.ts
@@ -9,5 +9,5 @@ export default function svgLoader(this: webpack.loader.LoaderContext, source: st
 	);
 	return `
 	import doma from 'doma';
-	export default () => doma.one('${svgWithClass.replace('\'', '\\\'')}')`;
+	export default () => doma.one(\`${svgWithClass.replace('\'', '\\\'')}\`)`;
 }
diff --git a/package-lock.json b/package-lock.json
index e3637f8f..e9a05bfd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -415,6 +415,14 @@
 				"object-assign": "^4.1.1"
 			}
 		},
+		"@primer/octicons-v2": {
+			"version": "0.0.0-60ee16f",
+			"resolved": "https://registry.npmjs.org/@primer/octicons-v2/-/octicons-v2-0.0.0-60ee16f.tgz",
+			"integrity": "sha512-R6fD0u+pAjw2LawwEJ2KvcIcU/9jvYfvTP/oK1bujUt1G6ascCGY7uac5KcvLNHrgxOAUnY91mtUIVev9RFulQ==",
+			"requires": {
+				"object-assign": "^4.1.1"
+			}
+		},
 		"@sindresorhus/is": {
 			"version": "0.14.0",
 			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
diff --git a/package.json b/package.json
index 043dbf1c..2af9b5f8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 	},
 	"dependencies": {
 		"@primer/octicons": "^9.6.0",
+		"@primer/octicons-v2": "0.0.0-60ee16f",
 		"copy-text-to-clipboard": "^2.2.0",
 		"debounce-fn": "^4.0.0",
 		"delay": "^4.3.0",
diff --git a/source/features/bugs-tab.tsx b/source/features/bugs-tab.tsx
index 5c854a75..afb8dbfb 100644
--- a/source/features/bugs-tab.tsx
+++ b/source/features/bugs-tab.tsx
@@ -1,7 +1,7 @@
 import React from 'dom-chef';
 import cache from 'webext-storage-cache';
 import select from 'select-dom';
-import BugIcon from 'octicon/bug.svg';
+import BugIcon from '@primer/octicons/build/svg/bug.svg';
 import elementReady from 'element-ready';
 import * as pageDetect from 'github-url-detection';
 
diff --git a/source/features/minimize-upload-bar.tsx b/source/features/minimize-upload-bar.tsx
index b64c60d2..43a2a57d 100644
--- a/source/features/minimize-upload-bar.tsx
+++ b/source/features/minimize-upload-bar.tsx
@@ -3,7 +3,7 @@ import React from 'dom-chef';
 import select from 'select-dom';
 import delegate from 'delegate-it';
 import * as pageDetect from 'github-url-detection';
-import CloudUploadIcon from 'octicon/cloud-upload.svg';
+import UploadIcon from 'octicon/upload.svg';
 
 import features from '.';
 
@@ -11,7 +11,7 @@ function addButton(): void {
 	for (const toolbarButton of select.all('md-ref')) {
 		toolbarButton.after(
 			<button type="button" className="toolbar-item tooltipped tooltipped-n rgh-upload-btn" aria-label="Attach files">
-				<CloudUploadIcon/>
+				<UploadIcon/>
 			</button>
 		);
 		toolbarButton.closest('form')!.classList.add('rgh-minimize-upload-bar');
diff --git a/source/features/release-download-count.tsx b/source/features/release-download-count.tsx
index 6b564bb1..da7cbd01 100644
--- a/source/features/release-download-count.tsx
+++ b/source/features/release-download-count.tsx
@@ -2,7 +2,7 @@ import './release-download-count.css';
 import React from 'dom-chef';
 import select from 'select-dom';
 import * as pageDetect from 'github-url-detection';
-import CloudDownloadIcon from 'octicon/cloud-download.svg';
+import DownloadIcon from 'octicon/download.svg';
 
 import features from '.';
 import * as api from '../github-helpers/api';
@@ -79,7 +79,7 @@ async function init(): Promise<void | false> {
 						.querySelector('small')!
 						.before(
 							<small className={classes} title="Downloads">
-								{prettyNumber(downloadCount)} <CloudDownloadIcon/>
+								{prettyNumber(downloadCount)} <DownloadIcon/>
 							</small>
 						);
 				}
diff --git a/source/features/tags-dropdown.tsx b/source/features/tags-dropdown.tsx
index c0aaa383..d66f8c42 100644
--- a/source/features/tags-dropdown.tsx
+++ b/source/features/tags-dropdown.tsx
@@ -1,7 +1,7 @@
 import './tags-dropdown.css';
 import React from 'dom-chef';
 import select from 'select-dom';
-import OctofaceIcon from 'octicon/octoface.svg';
+import OctofaceIcon from '@primer/octicons/build/svg/octoface.svg';
 import * as pageDetect from 'github-url-detection';
 
 import features from '.';
diff --git a/webpack.config.ts b/webpack.config.ts
index dafd2d86..dcda6b36 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -141,7 +141,7 @@ const config: Configuration = {
 	],
 	resolve: {
 		alias: {
-			octicon: '@primer/octicons/build/svg'
+			octicon: '@primer/octicons-v2/build/svg'
 		},
 		extensions: [
 			'.tsx',