feat: use actual inline SVGs instead of svg?include imports

.changeset/cool-mirrors-live.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-button': patch
+---
+
+Use inline SVGs to replace svg?include imports

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

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

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

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

packages/button/index.tsx

@@ -10,21 +10,21 @@ 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'
 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,17 +137,33 @@ 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}`],
         s[`at-${position}`],
         { [s.isHovered]: isHovered },
         { [s[`animation-${animationId}`]]: isAnimated }
       )}
-      src={svg}
-    />
+    >
+      {svg}
+    </div>
   )
 }
 

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