Use @shopify/polaris-icons instead of /icons and copy-icons (#6934)

We tried these options.

😢 **Copy icons to `public`**
Have to run a script, have to ignore or commit the files up.

🤷  **Create an API for icons**
Works but has to be versioned. Unsure what happens with new icon releases and making sure the API refreshes it's cache. Doesn't feel like a problem we should maintain as an API.

🤔 **Use `@shopify/polaris-icons` as intended**
Works (this PR) however we don't have a great way to get the buffer of the file. We generate it from a fetch for now.

Co-authored-by: Yuraima Estevez <4642404+yurm04@users.noreply.github.com>

Author: alex-page

.changeset/stupid-coats-repeat.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Use @shopify/polaris-icons instead of /icons and copy-icons

.gitignore

@@ -12,6 +12,4 @@ node_modules
 /polaris-react/build-internal
 /polaris-react/src/styles/_media-queries.scss
 /polaris-tokens/build
-/polaris.shopify.com/public/icons
 /polaris.shopify.com/public/og-images
-/polaris.shopify.com/.env.local

polaris.shopify.com/package.json

@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "build": "yarn run gen-assets && next build",
+    "dev": "open http://localhost:3000 && next dev",
     "postbuild": "yarn gen-sitemap",
-    "dev": "node scripts/copy-icons.mjs && open http://localhost:3000 && next dev",
     "start": "next start ",
     "lint": "run-p lint:*",
     "lint:js": "TIMING=1 eslint --cache .",
     "lint:styles": "stylelint '**/*.{css,scss}'",
     "clean": "rm -rf .turbo node_modules .next *.tsbuildinfo",
     "create-component": "generact --root src/components src/components/Template/Template.tsx",
-    "gen-assets": "node scripts/gen-og-images.mjs && node scripts/copy-icons.mjs",
+    "gen-assets": "node scripts/gen-og-images.mjs",
     "gen-sitemap": "yarn next-sitemap",
     "get-props": "ts-node --skip-project ./scripts/get-props.ts"
   },
@@ -34,11 +34,11 @@
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
+    "@types/gtag.js": "^0.0.10",
     "@types/js-yaml": "^4.0.5",
     "@types/marked": "^4.0.3",
     "@types/node": "17.0.21",
     "@types/prismjs": "^1.26.0",
-    "@types/gtag.js": "^0.0.10",
     "@types/react": "*",
     "eslint-config-next": "12.1.0",
     "eslint": "8.10.0",

polaris.shopify.com/scripts/copy-icons.mjs

@@ -1,10 +1,12 @@
-import Tooltip from '../Tooltip';
+import {ClipboardMinor} from '@shopify/polaris-icons';
+import {Tab} from '@headlessui/react';
+import {useState} from 'react';
 import Prism from 'prismjs';
+
 import {useCopyToClipboard} from '../../utils/hooks';
+import Icon from '../Icon';
 import styles from './Code.module.scss';
-import {Tab} from '@headlessui/react';
-import Image from '../Image';
-import {useState} from 'react';
+import Tooltip from '../Tooltip';
 
 interface Props {
   code:
@@ -93,13 +95,7 @@ function CopyButton({code}: {code: string}) {
           onClick={copy}
           aria-label="Copy to clipboard"
         >
-          <Image
-            src="/icons/ClipboardMinor.svg"
-            alt="Clipboard icon"
-            width={16}
-            height={16}
-            icon
-          />
+          <Icon source={ClipboardMinor} width={16} height={16} />
         </button>
       </Tooltip>
     </div>

polaris.shopify.com/src/components/Code/Code.tsx

@@ -1,12 +1,13 @@
 import Head from 'next/head';
-import Image from 'next/image';
 
 import Longform from '../Longform';
+import Icon from '../Icon';
 import Container from '../Container';
 import styles from './Error404Page.module.scss';
 import {useRouter} from 'next/router';
 import {useEffect} from 'react';
 import {useState} from 'react';
+import {CircleAlertMajor} from '@shopify/polaris-icons';
 
 interface Props {}
 
@@ -28,13 +29,9 @@ function Error404Page({}: Props) {
       <Container>
         <div style={{textAlign: 'center', marginTop: '4rem'}}>
           <Longform>
-            <Image
-              className={styles.Icon}
-              src="/icons/CircleAlertMajor.svg"
-              width={100}
-              height={100}
-              alt=""
-            />
+            <div className={styles.Icon}>
+              <Icon source={CircleAlertMajor} width={100} height={100} />
+            </div>
             <h1 style={{marginTop: '2rem'}}>There’s no page at this address</h1>
             <p>
               Check the URL and try again, or use the search field to find what

polaris.shopify.com/src/components/Error404Page/Error404Page.tsx

@@ -101,12 +101,12 @@
       width: 50px;
       border-radius: var(--border-radius-800);
 
-      img {
+      svg {
         opacity: 0.66;
       }
 
       @include dark-mode {
-        img {
+        svg {
           filter: invert(1);
         }
       }

polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss

@@ -1,9 +1,10 @@
-import Image from 'next/image';
+import Icon from '../Icon';
 import Link from 'next/link';
 import React from 'react';
 import {stripMarkdownLinks} from '../../utils/various';
 import {useGlobalSearchResult} from '../GlobalSearch/GlobalSearch';
 import styles from './FoundationsGrid.module.scss';
+import * as polarisIcons from '@shopify/polaris-icons';
 
 interface Props {
   title?: string;
@@ -45,7 +46,7 @@ function FoundationsGridItem({
       <Link href={url} passHref>
         <a {...searchAttributes}>
           <div className={styles.Icon}>
-            <Image src={`/icons/${icon}.svg`} alt="" width={20} height={20} />
+            <Icon source={(polarisIcons as any)[icon]} />
           </div>
           <h4>{title}</h4>
           <p>{stripMarkdownLinks(description)}</p>

polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.tsx

@@ -0,0 +1,10 @@
+@import '../../styles/mixins.scss';
+
+.Icon {
+  filter: contrast(0) brightness(-5000%);
+  opacity: 0.85;
+
+  @include dark-mode {
+    filter: contrast(0) brightness(5000%);
+  }
+}

polaris.shopify.com/src/components/Icon/Icon.module.scss

@@ -0,0 +1,14 @@
+import styles from './Icon.module.scss';
+
+interface Props {
+  source: React.ElementType;
+  width?: number;
+  height?: number;
+}
+
+function Icon({source, height = 20, width = 20}: Props) {
+  const SourceComponent = source;
+  return <SourceComponent className={styles.Icon} style={{width, height}} />;
+}
+
+export default Icon;