Add `inline_svg` gem

Extract the <svg> element that served as our <dialog> element’s “Close modal” button.

Store the .svg file in app/assets/images/icons, making it available to the inline_svg_tag-provided helper.


      Gemfile

diff --git a/Gemfile b/Gemfile
index 0472bb4..b1127cd 100644
--- a/Gemfile
+++ b/Gemfile
@@ -19,6 +19,7 @@ gem 'turbolinks', '~> 5'
 gem 'jbuilder', '~> 2.7'
 # Use Active Model has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
+gem 'inline_svg'
 
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.2', require: false


      Gemfile.lock

diff --git a/Gemfile.lock b/Gemfile.lock
index 6d80f68..810305a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -82,6 +82,9 @@ GEM
       activesupport (>= 4.2.0)
     i18n (1.8.2)
       concurrent-ruby (~> 1.0)
+    inline_svg (1.7.1)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     jbuilder (2.10.0)
       activesupport (>= 5.0.0)
     listen (3.1.5)
@@ -206,6 +209,7 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   factory_bot (~> 5.0.0)
+  inline_svg
   jbuilder (~> 2.7)
   listen (>= 3.0.5, < 3.2)
   pg (>= 0.18, < 2.0)


      app/assets/images/icons/x-circle.svg

diff --git a/app/assets/images/icons/x-circle.svg b/app/assets/images/icons/x-circle.svg
new file mode 100644
index 0000000..aa8969e
--- /dev/null
+++ b/app/assets/images/icons/x-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="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>


      app/views/seats/show.html.erb

diff --git a/app/views/seats/show.html.erb b/app/views/seats/show.html.erb
index 0bc456b..666b316 100644
--- a/app/views/seats/show.html.erb
+++ b/app/views/seats/show.html.erb
@@ -10,23 +10,12 @@
       <button
         class="syos-button syos-button--transparent"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="24"
-          height="24"
-          class="syos-icon syos-icon--large"
-          title="Close modal"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="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>
+        <%= inline_svg_tag(
+          "icons/x-circle.svg",
+          aria: true,
+          class: "syos-icon syos-icon--large",
+          title: "Close modal",
+        ) %>
       </button>
     </form>
   </header>

Add inline_svg gem

Add `inline_svg` gem