Create route icons and components to place these icons.

src/lib/components/mapIcons/Crossing.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let feature: {
+        kind: 'uwc' | 'ahb' | 'mcb' | 'cctv' | 'tmo' | 'foot';
+    };
+
+    export let activeElec: any;
+
+    $: type = feature.kind.toLowerCase();
+    $: isFoot = type === 'foot';
+    $: filterCategory = isFoot ? 'foot' : (type === 'uwc' ? 'uwc' : 'level-crossing');
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class={filterCategory}>
+    <BaseTrack {activeElec} height={64} />
+
+    {#if type === 'foot'}
+        <line x1="12" y1="32" x2="52" y2="32" stroke="#475569" stroke-width="2" stroke-dasharray="4 2" />
+
+    {:else if type === 'uwc'}
+        <g stroke="#1e293b" stroke-width="3">
+            <line x1="12" y1="26" x2="26" y2="26" /> 
+            <line x1="38" y1="38" x2="52" y2="38" />
+        </g>
+        <text x="50" y="32" class="label-right">UWC</text>
+
+    {:else}
+        <rect x="18" y="22" width="28" height="20" rx="1" fill="#1e293b" />
+        
+        <circle cx="25" cy="29" r="3.5" fill="#ef4444" /> <circle cx="39" cy="29" r="3.5" fill="#ef4444" /> <circle cx="32" cy="37" r="3.5" fill="#ffcc00" /> <text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
+    {/if}
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+    .label-right {
+        text-anchor: start; /* Align to the left of the start point */
+        dominant-baseline: central;
+        font-family: sans-serif;
+        font-weight: bold;
+        font-size: 9px;
+        fill: #1e293b;
+    }
+</style>