Add Inline Svg

For comparison [see this commit][commit]

With Superglue, we can use the JS equivalent of the popular `inline_svg` gem to
achieve the same convenience of extracting an svg element for the "close modal"

[commit]: seanpdoyle@c4ec5bc

app/components/SeatDialog.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import Dialog from './Dialog'
+import SVG from 'react-inlinesvg';
+import closeSvg from '../assets/images/icons/x-circle.svg'
 
 export default class extends React.Component {
   render () {
@@ -22,26 +24,8 @@ export default class extends React.Component {
           </h2>
 
           <form method="dialog">
-            <button
-              className="syos-button syos-button--transparent"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                className="syos-icon syos-icon--large"
-                title="Close modal"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="15" y1="9" x2="9" y2="15"></line>
-                <line x1="9" y1="9" x2="15" y2="15"></line>
-              </svg>
+            <button className="syos-button syos-button--transparent">
+              <SVG src={ closeSvg } />
             </button>
           </form>
         </header>

package.json

@@ -10,12 +10,13 @@
     "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "sass": "^1.69.0"
+    "sass": "^1.69.0",
+    "react-inlinesvg": "^4.0.3",
+    "react-redux": "^8.1.2"
   },
   "version": "0.1.0",
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx --public-path=/assets",
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx --loader:.svg=dataurl --public-path=/assets",
     "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   }
 }

yarn.lock

@@ -360,6 +360,18 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-from-dom@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.2.tgz#9da903a508c91c013b55afcd59348b8b0a39bdb4"
+  integrity sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==
+
+react-inlinesvg@^4.0.3:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-4.0.5.tgz#cbabe18e790c47f5cadca9ce974e3e8256c1c84f"
+  integrity sha512-gur6KP4la70Xt9Ku6kIRAiwPOsMxYGTFIJ1roG1igS9oZLvES72VtUfBEdaiZZfkej3jugQsVyq/mJkYr4OObQ==
+  dependencies:
+    react-from-dom "^0.6.2"
+
 react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"