Create route icons and components to place these icons.

src/lib/components/mapIcons/ElectrificationChange.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { getElecColour } from '$lib/railStyles';
+
+    export let feature: {
+        from: {
+            elec: string;
+            eco?: string;
+        },
+        to: {
+            elec: string;
+            eco?: string;
+        }
+    }
+
+    $: fromColour = getElecColour(feature.from.elec);
+    $: toColour = getElecColour(feature.to.elec);
+    $: showFromEco = !!feature.from.eco;
+    $: showToEco = !!feature.to.eco;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
+    <line x1="32" y1="0" x2="32" y2="32" stroke={fromColour} stroke-width="6" />
+    <line x1="32" y1="32" x2="32" y2="64" stroke={toColour} stroke-width="6" />
+
+    {#if showFromEco || showToEco}
+        <line x1="32" y1="32" x2="800" y2="32" 
+              stroke="#ef4444" stroke-width="2" stroke-dasharray="6 3" />
+
+        <g font-family="sans-serif" font-size="10" font-weight="800" text-anchor="start">
+            {#if showFromEco}
+                <text x="75" y="24" fill="#b91c1c" style="text-transform: uppercase;">
+                    ECO: {feature.from.eco}
+                </text>
+            {/if}
+            
+            {#if showToEco}
+                <text x="75" y="48" fill="#b91c1c" style="text-transform: uppercase;">
+                    ECO: {feature.to.eco}
+                </text>
+            {/if}
+        </g>
+    {/if}
+
+    <rect x="24" y="30" width="16" height="4" fill="white" stroke="#b91c1c" stroke-width="1.5" />
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+</style>