From 80a6f2ce7cd960576477cf63ebc6f6f09ca06021 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:13:37 -0800
Subject: [PATCH] feat: use actual inline SVGs instead of svg?include imports

---
 .changeset/cool-mirrors-live.md             |  5 +++
 package-lock.json                           | 14 ++++----
 packages/button/icons/arrow-right.svg       |  1 -
 packages/button/icons/arrow-right.tsx       | 21 ++++++++++++
 packages/button/icons/corner-right-down.svg |  1 -
 packages/button/icons/corner-right-down.tsx | 27 +++++++++++++++
 packages/button/icons/download.svg          |  1 -
 packages/button/icons/download.tsx          | 29 ++++++++++++++++
 packages/button/icons/external-link.svg     |  1 -
 packages/button/icons/external-link.tsx     | 30 ++++++++++++++++
 packages/button/index.tsx                   | 38 +++++++++++++++------
 packages/button/types.ts                    |  3 +-
 12 files changed, 148 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/cool-mirrors-live.md
 delete mode 100644 packages/button/icons/arrow-right.svg
 create mode 100644 packages/button/icons/arrow-right.tsx
 delete mode 100644 packages/button/icons/corner-right-down.svg
 create mode 100644 packages/button/icons/corner-right-down.tsx
 delete mode 100644 packages/button/icons/download.svg
 create mode 100644 packages/button/icons/download.tsx
 delete mode 100644 packages/button/icons/external-link.svg
 create mode 100644 packages/button/icons/external-link.tsx

diff --git a/.changeset/cool-mirrors-live.md b/.changeset/cool-mirrors-live.md
new file mode 100644
index 000000000..269c0e761
--- /dev/null
+++ b/.changeset/cool-mirrors-live.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-button': patch
+---
+
+Use inline SVGs to replace svg?include imports
diff --git a/package-lock.json b/package-lock.json
index 8c4dffd8b..bb82797bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39545,7 +39545,7 @@
     },
     "packages/accordion": {
       "name": "@hashicorp/react-accordion",
-      "version": "3.0.2",
+      "version": "3.1.0",
       "license": "MPL-2.0",
       "dependencies": {
         "classnames": "^2.3.1"
@@ -39585,7 +39585,7 @@
     },
     "packages/alert-banner": {
       "name": "@hashicorp/react-alert-banner",
-      "version": "7.1.0",
+      "version": "7.2.0",
       "license": "MPL-2.0",
       "dependencies": {
         "@hashicorp/platform-product-meta": "^0.1.0",
@@ -39744,7 +39744,7 @@
     },
     "packages/code-block": {
       "name": "@hashicorp/react-code-block",
-      "version": "6.4.0",
+      "version": "6.6.0",
       "license": "MPL-2.0",
       "dependencies": {
         "shellwords": "^0.1.1"
@@ -39934,7 +39934,7 @@
     },
     "packages/docs-page": {
       "name": "@hashicorp/react-docs-page",
-      "version": "17.9.0",
+      "version": "17.9.1",
       "license": "MPL-2.0",
       "dependencies": {
         "@hashicorp/platform-docs-mdx": "^0.2.0",
@@ -40452,7 +40452,7 @@
     },
     "packages/logo-grid": {
       "name": "@hashicorp/react-logo-grid",
-      "version": "5.1.0",
+      "version": "5.2.0",
       "license": "MPL-2.0",
       "dependencies": {
         "@hashicorp/react-button": "^6.3.1",
@@ -40984,7 +40984,7 @@
     },
     "packages/split-rich-cta-list": {
       "name": "@hashicorp/react-split-rich-cta-list",
-      "version": "2.0.4",
+      "version": "2.1.0",
       "license": "MPL-2.0",
       "dependencies": {
         "@hashicorp/platform-product-meta": "^0.1.0",
@@ -41058,7 +41058,7 @@
     },
     "packages/tabs": {
       "name": "@hashicorp/react-tabs",
-      "version": "8.0.0",
+      "version": "8.1.0",
       "license": "MPL-2.0",
       "dependencies": {
         "classnames": "^2.3.1"
diff --git a/packages/button/icons/arrow-right.svg b/packages/button/icons/arrow-right.svg
deleted file mode 100644
index 9fd931173..000000000
--- a/packages/button/icons/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="presentation" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Arrow pointing right</title><path d="M20 12L14 18M4 12H20H4ZM20 12L14 6L20 12Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/packages/button/icons/arrow-right.tsx b/packages/button/icons/arrow-right.tsx
new file mode 100644
index 000000000..739df9919
--- /dev/null
+++ b/packages/button/icons/arrow-right.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <title>{'Arrow pointing right'}</title>
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m20 12-6 6M4 12h16H4Zm16 0-6-6 6 6Z"
+    />
+  </svg>
+)
+export default SvgComponent
diff --git a/packages/button/icons/corner-right-down.svg b/packages/button/icons/corner-right-down.svg
deleted file mode 100644
index afcee5881..000000000
--- a/packages/button/icons/corner-right-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="presentation" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15L15 20L20 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 4L11 4C13.2091 4 15 5.79086 15 8L15 20" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/packages/button/icons/corner-right-down.tsx b/packages/button/icons/corner-right-down.tsx
new file mode 100644
index 000000000..1b326cef7
--- /dev/null
+++ b/packages/button/icons/corner-right-down.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m10 15 5 5 5-5"
+    />
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M4 4h7a4 4 0 0 1 4 4v12"
+    />
+  </svg>
+)
+export default SvgComponent
diff --git a/packages/button/icons/download.svg b/packages/button/icons/download.svg
deleted file mode 100644
index 1ec556705..000000000
--- a/packages/button/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="presentation" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Download icon</title><path d="M3 17v3a2 2 0 002 2h14a2 2 0 002-2v-3" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path data-animation-target="true" d="M8 12l4 4m0 0l4-4m-4 4V2" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/packages/button/icons/download.tsx b/packages/button/icons/download.tsx
new file mode 100644
index 000000000..bea633e2f
--- /dev/null
+++ b/packages/button/icons/download.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <title>{'Download icon'}</title>
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"
+    />
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m8 12 4 4m0 0 4-4m-4 4V2"
+      data-animation-target="true"
+    />
+  </svg>
+)
+export default SvgComponent
diff --git a/packages/button/icons/external-link.svg b/packages/button/icons/external-link.svg
deleted file mode 100644
index 5ac13045d..000000000
--- a/packages/button/icons/external-link.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="presentation" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>External link icon</title><path d="M18 13V19C18 20.1046 17.1046 21 16 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><g data-animation-target="true"><path d="M15 3H21V9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14L21 3" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/packages/button/icons/external-link.tsx b/packages/button/icons/external-link.tsx
new file mode 100644
index 000000000..d7df07ca7
--- /dev/null
+++ b/packages/button/icons/external-link.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <title>{'External link icon'}</title>
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+    />
+    <g
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      data-animation-target="true"
+    >
+      <path d="M15 3h6v6M10 14 21 3" />
+    </g>
+  </svg>
+)
+export default SvgComponent
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
index 993d1aa7c..d28d060ca 100644
--- a/packages/button/index.tsx
+++ b/packages/button/index.tsx
@@ -10,10 +10,10 @@ import fragment from './fragment.graphql'
 import classNames from 'classnames'
 import useProductMeta from '@hashicorp/platform-product-meta'
 import InlineSvg from '@hashicorp/react-inline-svg'
-import svgArrowRight from './icons/arrow-right.svg?include'
-import svgExternalLink from './icons/external-link.svg?include'
-import svgCornerRightDown from './icons/corner-right-down.svg?include'
-import svgDownload from './icons/download.svg?include'
+import ArrowRight from './icons/arrow-right'
+import ExternalLink from './icons/external-link'
+import CornerRightDown from './icons/corner-right-down'
+import Download from './icons/download'
 import s from './style.module.css'
 import sTheme from './theme.module.css'
 import useHover from './hooks/use-hover'
@@ -21,10 +21,10 @@ import normalizeButtonTheme from './helpers/normalizeButtonTheme.js'
 import { Size, LinkType, IconObject, Theme, IconProps } from './types'
 
 const linkTypeToIcon = {
-  inbound: svgArrowRight,
-  outbound: svgExternalLink,
-  anchor: svgCornerRightDown,
-  download: svgDownload,
+  inbound: <ArrowRight />,
+  outbound: <ExternalLink />,
+  anchor: <CornerRightDown />,
+  download: <Download />,
 }
 
 interface ButtonProps {
@@ -137,8 +137,23 @@ function Icon({
   isHovered,
   size,
 }: IconProps) {
+  if (typeof svg === 'string') {
+    return (
+      <InlineSvg
+        className={classNames(
+          s.icon,
+          s[`size-${size}`],
+          s[`at-${position}`],
+          { [s.isHovered]: isHovered },
+          { [s[`animation-${animationId}`]]: isAnimated }
+        )}
+        src={svg}
+      />
+    )
+  }
+
   return (
-    <InlineSvg
+    <div
       className={classNames(
         s.icon,
         s[`size-${size}`],
@@ -146,8 +161,9 @@ function Icon({
         { [s.isHovered]: isHovered },
         { [s[`animation-${animationId}`]]: isAnimated }
       )}
-      src={svg}
-    />
+    >
+      {svg}
+    </div>
   )
 }
 
diff --git a/packages/button/types.ts b/packages/button/types.ts
index f0a2753fa..94625c096 100644
--- a/packages/button/types.ts
+++ b/packages/button/types.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import type { ReactNode } from 'react'
 import { Products as HashiCorpProduct } from '@hashicorp/platform-product-meta'
 
 export type Size = 'medium' | 'small'
@@ -39,7 +40,7 @@ export interface Theme {
 }
 
 export interface IconProps {
-  svg: string
+  svg: ReactNode
   position: IconPosition
   animationId?: LinkType
   isAnimated?: boolean