From b06cc0ede70d20140ec6b5327862ebc734fd6bef Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Sat, 12 Jul 2025 21:13:34 +0200
Subject: [PATCH] Store routing icons separately

---
 Gemfile                                       |  3 +
 Gemfile.lock                                  |  4 +
 app/assets/images/routing/destination.svg     |  3 +
 .../images/routing/end-of-road-right.svg      |  4 +
 app/assets/images/routing/exit-right.svg      |  4 +
 app/assets/images/routing/ferry.svg           |  5 ++
 app/assets/images/routing/fork-right.svg      |  4 +
 app/assets/images/routing/merge-right.svg     |  4 +
 app/assets/images/routing/right.svg           |  3 +
 app/assets/images/routing/roundabout.svg      |  3 +
 app/assets/images/routing/sharp-right.svg     |  3 +
 app/assets/images/routing/slight-right.svg    |  3 +
 app/assets/images/routing/start.svg           |  3 +
 app/assets/images/routing/straight.svg        |  3 +
 app/assets/images/routing/u-turn-right.svg    |  3 +
 app/views/directions/show.html.erb            | 85 +++----------------
 config/initializers/inline_svg.rb             | 13 +++
 17 files changed, 76 insertions(+), 74 deletions(-)
 create mode 100644 app/assets/images/routing/destination.svg
 create mode 100644 app/assets/images/routing/end-of-road-right.svg
 create mode 100644 app/assets/images/routing/exit-right.svg
 create mode 100644 app/assets/images/routing/ferry.svg
 create mode 100644 app/assets/images/routing/fork-right.svg
 create mode 100644 app/assets/images/routing/merge-right.svg
 create mode 100644 app/assets/images/routing/right.svg
 create mode 100644 app/assets/images/routing/roundabout.svg
 create mode 100644 app/assets/images/routing/sharp-right.svg
 create mode 100644 app/assets/images/routing/slight-right.svg
 create mode 100644 app/assets/images/routing/start.svg
 create mode 100644 app/assets/images/routing/straight.svg
 create mode 100644 app/assets/images/routing/u-turn-right.svg
 create mode 100644 config/initializers/inline_svg.rb

diff --git a/Gemfile b/Gemfile
index ef0806d50..793ae931b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -136,6 +136,9 @@ gem "aws-sdk-s3"
 # Used to resize user images
 gem "image_processing"
 
+# Used to manage svg files
+gem "inline_svg"
+
 # Used to validate widths
 gem "unicode-display_width"
 
diff --git a/Gemfile.lock b/Gemfile.lock
index b0ec61265..56d90ca13 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -341,6 +341,9 @@ GEM
     image_size (3.4.0)
     in_threads (1.6.0)
     iniparse (1.5.0)
+    inline_svg (1.10.0)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     io-console (0.8.1)
     irb (1.15.2)
       pp (>= 0.6.0)
@@ -738,6 +741,7 @@ DEPENDENCIES
   i18n-tasks
   image_optim_rails
   image_processing
+  inline_svg
   jbuilder (~> 2.7)
   jquery-rails
   json
diff --git a/app/assets/images/routing/destination.svg b/app/assets/images/routing/destination.svg
new file mode 100644
index 000000000..f73e0ff69
--- /dev/null
+++ b/app/assets/images/routing/destination.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M10 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
+</svg>
diff --git a/app/assets/images/routing/end-of-road-right.svg b/app/assets/images/routing/end-of-road-right.svg
new file mode 100644
index 000000000..74b70e7bd
--- /dev/null
+++ b/app/assets/images/routing/end-of-road-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M2 9 h10" opacity=".5" />
+  <path d="M9 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
+</svg>
diff --git a/app/assets/images/routing/exit-right.svg b/app/assets/images/routing/exit-right.svg
new file mode 100644
index 000000000..263a7d69c
--- /dev/null
+++ b/app/assets/images/routing/exit-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M9 14 v-8" opacity=".5" />
+  <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+</svg>
diff --git a/app/assets/images/routing/ferry.svg b/app/assets/images/routing/ferry.svg
new file mode 100644
index 000000000..0c542cc6d
--- /dev/null
+++ b/app/assets/images/routing/ferry.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1">
+  <path d="M10.5 8 l-6 2 l2.5 2 v1.5 a2.828 2.828 0 0 1 1.5 1 a2.828 2.828 0 0 1 4 0 a2.828 2.828 0 0 1 1.5 -1 v-1.5 l2.5 -2 z" fill="currentColor" />
+  <path d="M6.5 9.5 v-5 h8 v5 m-5.5 -6 h3" />
+  <path d="M5.5 16.5 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0" />
+</svg>
diff --git a/app/assets/images/routing/fork-right.svg b/app/assets/images/routing/fork-right.svg
new file mode 100644
index 000000000..c08be094d
--- /dev/null
+++ b/app/assets/images/routing/fork-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M9 14 q0 -2 -2 -4 l-3 -3" opacity=".5" />
+  <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+</svg>
diff --git a/app/assets/images/routing/merge-right.svg b/app/assets/images/routing/merge-right.svg
new file mode 100644
index 000000000..a28f83157
--- /dev/null
+++ b/app/assets/images/routing/merge-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M12 7 q0 2 2 4 l3 3" opacity=".5" />
+  <path d="M12 4 v3 q0 2 -2 4 l-5 5 m5 -5 h-3 l3 3 z" />
+</svg>
diff --git a/app/assets/images/routing/right.svg b/app/assets/images/routing/right.svg
new file mode 100644
index 000000000..ba69e8ec1
--- /dev/null
+++ b/app/assets/images/routing/right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M7 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
+</svg>
diff --git a/app/assets/images/routing/roundabout.svg b/app/assets/images/routing/roundabout.svg
new file mode 100644
index 000000000..fa23cad17
--- /dev/null
+++ b/app/assets/images/routing/roundabout.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M8 17 v-3 a 3 3 0 1 0 0 -6 3 3 0 1 0 0 6 m2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+</svg>
diff --git a/app/assets/images/routing/sharp-right.svg b/app/assets/images/routing/sharp-right.svg
new file mode 100644
index 000000000..42c0b3600
--- /dev/null
+++ b/app/assets/images/routing/sharp-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M7 17 v-7 q0 -6 6 0 l2 2 m0 0 v-3 l-3 3 z" />
+</svg>
diff --git a/app/assets/images/routing/slight-right.svg b/app/assets/images/routing/slight-right.svg
new file mode 100644
index 000000000..31fed0d9d
--- /dev/null
+++ b/app/assets/images/routing/slight-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M7 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+</svg>
diff --git a/app/assets/images/routing/start.svg b/app/assets/images/routing/start.svg
new file mode 100644
index 000000000..a7baac371
--- /dev/null
+++ b/app/assets/images/routing/start.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M10 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
+</svg>
diff --git a/app/assets/images/routing/straight.svg b/app/assets/images/routing/straight.svg
new file mode 100644
index 000000000..aad1ae1f7
--- /dev/null
+++ b/app/assets/images/routing/straight.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M10 17 v-13 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
+</svg>
diff --git a/app/assets/images/routing/u-turn-right.svg b/app/assets/images/routing/u-turn-right.svg
new file mode 100644
index 000000000..5c3184979
--- /dev/null
+++ b/app/assets/images/routing/u-turn-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M4 17 v-7 a4.5 4.5 0 0 1 9 0 v5 m2.5 -2 l-2.5 2.5 -2.5 -2.5 z" />
+</svg>
diff --git a/app/views/directions/show.html.erb b/app/views/directions/show.html.erb
index 82ed72df2..b460506cc 100644
--- a/app/views/directions/show.html.erb
+++ b/app/views/directions/show.html.erb
@@ -1,79 +1,16 @@
 <% content_for(:content_class) { "overlay-sidebar" } %>
 
-<svg width="20" height="20" class="d-none">
-  <symbol id="routing-sprite-start" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M10 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
-  </symbol>
-  <symbol id="routing-sprite-destination" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M10 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
-  </symbol>
-
-  <symbol id="routing-sprite-straight" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M10 17 v-13 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
-  </symbol>
-  <symbol id="routing-sprite-slight-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M7 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
-  </symbol>
-  <symbol id="routing-sprite-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M8 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
-  </symbol>
-  <symbol id="routing-sprite-sharp-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M8 17 v-7 q0 -6 6 0 l2 2 m0 0 v-3 l-3 3 z" />
-  </symbol>
-  <symbol id="routing-sprite-u-turn-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M4 17 v-7 a4.5 4.5 0 0 1 9 0 v5 m2.5 -2 l-2.5 2.5 -2.5 -2.5 z" />
-  </symbol>
-  <symbol id="routing-sprite-slight-left">
-    <use href="#routing-sprite-slight-right" transform="matrix(-1 0 0 1 20 0)" />
-  </symbol>
-  <symbol id="routing-sprite-left">
-    <use href="#routing-sprite-right" transform="matrix(-1 0 0 1 21 0)" />
-  </symbol>
-  <symbol id="routing-sprite-sharp-left">
-    <use href="#routing-sprite-sharp-right" transform="matrix(-1 0 0 1 21 0)" />
-  </symbol>
-  <symbol id="routing-sprite-u-turn-left">
-    <use href="#routing-sprite-u-turn-right" transform="matrix(-1 0 0 1 20 0)" />
-  </symbol>
-
-  <symbol id="routing-sprite-roundabout" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M8 17 v-3 a 3 3 0 1 0 0 -6 3 3 0 1 0 0 6 m2 -4 l5 -5 m0 0 h-3 l3 3 z" />
-  </symbol>
-
-  <symbol id="routing-sprite-fork-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M9 14 q0 -2 -2 -4 l-3 -3" opacity=".5" />
-    <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
-  </symbol>
-  <symbol id="routing-sprite-fork-left">
-    <use href="#routing-sprite-fork-right" transform="matrix(-1 0 0 1 20 0)" />
-  </symbol>
-  <symbol id="routing-sprite-merge-left" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M8 7 q0 2 -2 4 l-3 3" opacity=".5" />
-    <path d="M8 4 v3 q0 2 2 4 l5 5 m-5 -5 h3 l-3 3 z" />
-  </symbol>
-  <symbol id="routing-sprite-merge-right">
-    <use href="#routing-sprite-merge-left" transform="matrix(-1 0 0 1 20 0)" />
-  </symbol>
-  <symbol id="routing-sprite-end-of-road-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M2 9 h10" opacity=".5" />
-    <path d="M9 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
-  </symbol>
-  <symbol id="routing-sprite-end-of-road-left">
-    <use href="#routing-sprite-end-of-road-right" transform="matrix(-1 0 0 1 20 0)" />
-  </symbol>
-  <symbol id="routing-sprite-exit-right" fill="none" stroke="currentColor" stroke-width="2">
-    <path d="M9 14 v-8" opacity=".5" />
-    <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
-  </symbol>
-  <symbol id="routing-sprite-exit-left">
-    <use href="#routing-sprite-exit-right" transform="matrix(-1 0 0 1 20 0)" />
-  </symbol>
-
-  <symbol id="routing-sprite-ferry" fill="none" stroke="currentColor" stroke-width="1">
-    <path d="M10.5 8 l-6 2 l2.5 2 v1.5 a2.828 2.828 0 0 1 1.5 1 a2.828 2.828 0 0 1 4 0 a2.828 2.828 0 0 1 1.5 -1 v-1.5 l2.5 -2 z" fill="currentColor" />
-    <path d="M6.5 9.5 v-5 h8 v5 m-5.5 -6 h3" />
-    <path d="M5.5 16.5 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0" />
-  </symbol>
+<svg class="d-none">
+  <% Rails.root.glob("app/assets/images/routing/*.svg")
+          .map { |path| File.basename(path, ".svg") }
+          .each do |icon| %>
+    <%= inline_svg_tag "routing/#{icon}.svg", :id => "routing-sprite-#{icon}", :to_symbol => true %>
+    <% if icon.end_with?("right") %>
+      <symbol id="routing-sprite-<%= icon.sub("right", "left") %>">
+        <use href="#routing-sprite-<%= icon %>" transform="matrix(-1 0 0 1 20 0)" />
+      </symbol>
+    <% end
+  end %>
 </svg>
 
 <%= render "sidebar_header", :title => t(".title") %>
diff --git a/config/initializers/inline_svg.rb b/config/initializers/inline_svg.rb
new file mode 100644
index 000000000..9a117b13e
--- /dev/null
+++ b/config/initializers/inline_svg.rb
@@ -0,0 +1,13 @@
+module OpenStreetMap
+  class SvgToSymbolTransform < InlineSvg::CustomTransformation
+    def transform(doc)
+      with_svg(doc) do |svg|
+        svg.name = "symbol"
+      end
+    end
+  end
+end
+
+InlineSvg.configure do |config|
+  config.add_custom_transformation(:attribute => :to_symbol, :transform => OpenStreetMap::SvgToSymbolTransform)
+end
-- 
2.39.5