feat: use next/image instead of react-inline-svg (#1007)

hashicorp · Dec 12, 2023 · e49d8f6 · e49d8f6 · vercel · Dec 12, 2023
1 parent 9bc09ab
commit e49d8f6
Show file tree

Hide file tree

Showing 21 changed files with 68 additions and 65 deletions.
diff --git a/.changeset/yellow-houses-jam.md b/.changeset/yellow-houses-jam.md
@@ -0,0 +1,10 @@
+---
+'@hashicorp/react-accordion': minor
+'@hashicorp/react-alert-banner': minor
+'@hashicorp/react-code-block': minor
+'@hashicorp/react-logo-grid': minor
+'@hashicorp/react-split-rich-cta-list': minor
+'@hashicorp/react-tabs': minor
+---
+
+Use next/image instead of react-inline-svg
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="next" />
+/// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -12,7 +12,6 @@ module.exports = withHashicorp({
     '@hashicorp/sentinel-embedded',
     '@hashicorp/flight-icons',
   ],
-  nextOptimizedImages: true,
 })(
   withSwingset({
     componentsRoot: 'packages/**/*',
@@ -41,7 +40,7 @@ module.exports = withHashicorp({
     ],
     images: {
       domains: ['www.datocms-assets.com'],
-      disableStaticImages: true,
+      disableStaticImages: false,
     },
     webpack(config) {
       // disable `exports` support for framer-motion. This will cause Webpack to

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/accordion/package.json b/packages/accordion/package.json
@@ -7,7 +7,6 @@
     "Zach Shilton"
   ],
   "dependencies": {
-    "@hashicorp/react-inline-svg": "^6.0.3",
     "classnames": "^2.3.1"
   },
   "license": "MPL-2.0",

diff --git a/packages/accordion/partials/AccordionItems/index.js b/packages/accordion/partials/AccordionItems/index.js
@@ -4,10 +4,10 @@
  */
 
 import React, { useState } from 'react'
-import InlineSvg from '@hashicorp/react-inline-svg'
-import SvgArrowDown from './icons/arrow-down.svg?include'
+import Image from 'next/image'
 import classnames from 'classnames'
 import Collapsible from '../Collapsible'
+import SvgArrowDown from './icons/arrow-down.svg'
 import s from './style.module.css'
 
 function AccordionItem({ heading, children, isCollapsed, toggleCollapsed }) {
@@ -20,7 +20,7 @@ function AccordionItem({ heading, children, isCollapsed, toggleCollapsed }) {
       >
         <span className={s.triggerText}>{heading}</span>
         <span className={s.triggerIcon}>
-          <InlineSvg src={SvgArrowDown} />
+          <Image alt="" {...SvgArrowDown} />
         </span>
       </button>
       <Collapsible isCollapsed={isCollapsed}>

diff --git a/packages/accordion/partials/AccordionItems/style.module.css b/packages/accordion/partials/AccordionItems/style.module.css
@@ -60,7 +60,7 @@
   transition: transform 0.4s;
   transform: var(--icon-transform);
 
-  & svg {
+  & img {
     display: block;
     width: 24px;
     height: 24px;

diff --git a/packages/alert-banner/index.tsx b/packages/alert-banner/index.tsx
@@ -11,8 +11,8 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import useProductMeta, {
   Products as HashiCorpProduct,
 } from '@hashicorp/platform-product-meta'
-import InlineSvg from '@hashicorp/react-inline-svg'
-import CloseIcon from './img/close-icon.svg?include'
+import Image from 'next/image'
+import CloseIcon from './img/close-icon.svg'
 import fragment from './fragment.graphql'
 import s from './style.module.css'
 import analytics from './analytics'
@@ -106,7 +106,7 @@ function AlertBanner({
           </span>
         </a>
         <button className={s.closeButton} onClick={closeBanner}>
-          <InlineSvg src={CloseIcon} />
+          <Image alt="Close" {...CloseIcon} />
           <VisuallyHidden>Dismiss alert</VisuallyHidden>
         </button>
       </div>

diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json
@@ -11,7 +11,6 @@
   ],
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
-    "@hashicorp/react-inline-svg": "^6.0.3",
     "@radix-ui/react-visually-hidden": "^1.0.2",
     "js-cookie": "^2.2.1",
     "slugify": "^1.6.5"

diff --git a/packages/code-block/package.json b/packages/code-block/package.json
@@ -4,7 +4,6 @@
   "version": "6.4.0",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/react-inline-svg": "^6.0.3",
     "shellwords": "^0.1.1"
   },
   "license": "MPL-2.0",

diff --git a/packages/code-block/partials/snippet-bar/index.jsx b/packages/code-block/partials/snippet-bar/index.jsx
@@ -5,11 +5,27 @@
 
 import React from 'react'
 import ClipboardButton from '../clipboard-button'
-import InlineSvg from '@hashicorp/react-inline-svg'
-import svgFile from './svg/file.svg?include'
-
 import s from './style.module.css'
 
+function FileIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={25}
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <path
+        fill="#000"
+        fillRule="evenodd"
+        d="M6 2.08a2.75 2.75 0 0 0-2.75 2.75v16A2.75 2.75 0 0 0 6 23.58h12a2.75 2.75 0 0 0 2.75-2.75v-11a.748.748 0 0 0-.22-.53l-7-7a.751.751 0 0 0-.53-.22m-.75 1.5H6c-.69 0-1.25.56-1.25 1.25v16c0 .691.56 1.25 1.25 1.25h12c.69 0 1.25-.559 1.25-1.25V10.58H13a.75.75 0 0 1-.75-.75V3.58Zm5.94 5.5-4.44-4.439v4.44h4.44Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
 function SnippetBar({ showChrome, filename, getText, heading, showClipboard }) {
   if (showClipboard && !getText) {
     throw new Error(
@@ -29,7 +45,7 @@ function SnippetBar({ showChrome, filename, getText, heading, showClipboard }) {
         ) : null}
         {filename ? (
           <div className={s.filename}>
-            <InlineSvg src={svgFile} />
+            <FileIcon />
             {filename}
           </div>
         ) : null}

diff --git a/packages/code-block/partials/snippet-bar/svg/file.svg b/packages/code-block/partials/snippet-bar/svg/file.svg
diff --git a/packages/logo-grid/package.json b/packages/logo-grid/package.json
@@ -9,7 +9,6 @@
   "dependencies": {
     "@hashicorp/react-button": "^6.3.1",
     "@hashicorp/react-image": "^4.1.1",
-    "@hashicorp/react-inline-svg": "^6.0.3",
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-visually-hidden": "^1.0.2",
     "classnames": "^2.3.1"

diff --git a/packages/logo-grid/partials/popover-tooltip/index.tsx b/packages/logo-grid/partials/popover-tooltip/index.tsx
@@ -5,9 +5,9 @@
 
 import React from 'react'
 import * as Popover from '@radix-ui/react-popover'
-import InlineSvg from '@hashicorp/react-inline-svg'
+import Image from 'next/image'
 import classNames from 'classnames'
-import svgX from '../../icons/x.svg?include'
+import svgX from '../../icons/x.svg'
 import s from './style.module.css'
 
 interface PopoverTooltipProps {
@@ -23,7 +23,7 @@ function PopoverTooltip({ children, theme = 'light' }: PopoverTooltipProps) {
       <Popover.Content className={classNames(s.popover, s[theme])}>
         {children}
         <Popover.Close className={s.dialogClose} aria-label="Close">
-          <InlineSvg src={svgX} aria-hidden />
+          <Image {...svgX} aria-hidden />
         </Popover.Close>
         <Popover.Arrow className={s.dialogArrow}></Popover.Arrow>
       </Popover.Content>

diff --git a/packages/split-rich-cta-list/index.jsx b/packages/split-rich-cta-list/index.jsx
@@ -10,6 +10,7 @@ import InlineSvg from '@hashicorp/react-inline-svg'
 import LinkWrap from '@hashicorp/react-link-wrap'
 import RightArrow from './img/arrow-right.svg?include'
 import styles from './styles.module.css'
+import Image from 'next/image'
 
 export default function SplitRichCTAList({
   className,
@@ -30,7 +31,7 @@ export default function SplitRichCTAList({
                 <h5>{item.title}</h5>
                 <p className={styles.bodySmall}>{item.description}</p>
               </div>
-              <InlineSvg className={styles.arrow} src={RightArrow} />
+              <Image className={styles.arrow} {...RightArrow} />
             </LinkWrap>
           </li>
         ))}

diff --git a/packages/split-rich-cta-list/package.json b/packages/split-rich-cta-list/package.json
@@ -9,7 +9,6 @@
   ],
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
-    "@hashicorp/react-inline-svg": "^6.0.3",
     "@hashicorp/react-link-wrap": "^3.0.3",
     "classnames": "^2.3.1"
   },

diff --git a/packages/tabs/package.json b/packages/tabs/package.json
@@ -7,7 +7,6 @@
     "Zach Shilton"
   ],
   "dependencies": {
-    "@hashicorp/react-inline-svg": "^6.0.3",
     "classnames": "^2.3.1"
   },
   "peerDependencies": {

diff --git a/packages/tabs/partials/tab-triggers/index.tsx b/packages/tabs/partials/tab-triggers/index.tsx
@@ -5,9 +5,9 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
-import InlineSvg from '@hashicorp/react-inline-svg'
+import Image from 'next/image'
 import TabTrigger, { TabTriggerType } from '../tab-trigger'
-import SvgChevronRight from '../../icons/chevron-right.svg?include'
+import SvgChevronRight from '../../icons/chevron-right.svg'
 import smoothScroll from '../../utils/smooth-scroll.js'
 import useWindowSize from '../../hooks/use-window-size'
 import useScrollLeft from '../../hooks/use-scroll-left'
@@ -221,7 +221,7 @@ function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }) {
         })}
         onClick={onPrev}
       >
-        <InlineSvg src={SvgChevronRight} />
+        <Image alt="Previous" {...SvgChevronRight} />
       </div>
       <div
         className={classNames(s.nextArrow, {
@@ -230,7 +230,7 @@ function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }) {
         })}
         onClick={onNext}
       >
-        <InlineSvg src={SvgChevronRight} />
+        <Image alt="Next" {...SvgChevronRight} />
       </div>
     </>
   )

diff --git a/packages/tabs/partials/tab-triggers/style.module.css b/packages/tabs/partials/tab-triggers/style.module.css
@@ -102,7 +102,7 @@ there is overflow.
     opacity: 0;
   }
 
-  & svg {
+  & img {
     display: block;
     width: 20px;
     height: 20px;
@@ -125,7 +125,7 @@ there is overflow.
   composes: arrow;
   left: 0;
 
-  & svg {
+  & img {
     transform: rotate(180deg);
     margin-right: 20px;
   }
@@ -135,7 +135,7 @@ there is overflow.
   composes: arrow;
   right: 0;
 
-  & svg {
+  & img {
     margin-left: 20px;
   }
 }

diff --git a/swingset-extensions/usage-details/partials/icon/index.js b/swingset-extensions/usage-details/partials/icon/index.js
@@ -4,34 +4,26 @@
  */
 
 import React from 'react'
-import InlineSvg from '@hashicorp/react-inline-svg'
+import Image from 'next/image'
+import LoadingSpinner from '../../svg/loading-spinner.svg'
+import GithubIcon from '../../svg/github-icon.svg'
+import XIcon from '../../svg/x-icon.svg'
 import s from './style.module.css'
 
 function Icon({ icon, isHovered }) {
   if (icon == 'loading') {
-    return (
-      <InlineSvg
-        className={s.loadingIcon}
-        src={require('../../svg/loading-spinner.svg?include')}
-      />
-    )
+    return <Image className={s.loadingIcon} {...LoadingSpinner} />
   }
   if (icon == 'github') {
     return (
-      <InlineSvg
+      <Image
         className={s.githubIcon}
-        src={require('../../svg/github-icon.svg?include')}
+        {...GithubIcon}
         data-hovered={isHovered}
       />
     )
   }
-  return (
-    <InlineSvg
-      className={s.xIcon}
-      src={require('../../svg/x-icon.svg?include')}
-      data-hovered={isHovered}
-    />
-  )
+  return <Image className={s.xIcon} {...XIcon} data-hovered={isHovered} />
 }
 
 export default Icon