feat: replace SVG icons with BIIcon component in Footer, Header, and index pages

app/pages/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import BIIcon from "~/components/BIIcon.vue";
+
 const { getOpenDataReports } = usePublic()
 
 const stats = {
@@ -42,24 +44,24 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
       <h2 class="text-center mb-5 font-weight-bold">Come funziona</h2>
       <div class="row text-center">
         <div class="col-12 col-md-4 mb-4">
-          <svg class="icon icon-xl icon-primary mb-3">
-            <use href="#it-camera"></use>
-          </svg>
+          <div class="mb-3">
+            <BIIcon name="it-camera" size="xl" color="primary" />
+          </div>
           <h3 class="h5 font-weight-semibold">1. Segnala</h3>
           <p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
             esatta.</p>
         </div>
         <div class="col-12 col-md-4 mb-4">
-          <svg class="icon icon-xl icon-primary mb-3">
-            <use href="#it-tool"></use>
-          </svg>
+          <div class="mb-3">
+            <BIIcon name="it-tool" size="xl" color="primary" />
+          </div>
           <h3 class="h5 font-weight-semibold">2. Intervento</h3>
           <p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
         </div>
         <div class="col-12 col-md-4 mb-4">
-          <svg class="icon icon-xl icon-primary mb-3">
-            <use href="#it-star-outline"></use>
-          </svg>
+          <div class="mb-3">
+            <BIIcon name="it-star-outline" size="xl" color="primary" />
+          </div>
           <h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
           <p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
         </div>
@@ -94,9 +96,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
         <h2 class="font-weight-bold">Ultimi interventi risolti</h2>
         <NuxtLink to="/open-data" class="read-more">
           <span class="text">Vedi tutti</span>
-          <svg class="icon">
-            <use href="#it-arrow-right"></use>
-          </svg>
+          <BIIcon name="it-arrow-right" />
         </NuxtLink>
       </div>
 
@@ -106,17 +106,13 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
             <div class="card card-bg card-big">
               <div class="card-body">
                 <div class="category-top">
-                  <svg class="icon icon-sm text-success">
-                    <use href="#it-check-circle"></use>
-                  </svg>
+                  <BIIcon name="it-check-circle" size="sm" color="success" />
                   <span class="category text-success font-weight-semibold">Risolto</span>
                 </div>
                 <h3 class="card-title h5 mt-2">{{ report.category_name }}</h3>
 
                 <p class="card-text text-muted">
-                  <svg class="icon icon-xs me-1">
-                    <use href="#it-map-marker-circle"></use>
-                  </svg>
+                  <span class="me-1"><BIIcon name="it-map-marker-circle" size="xs" /></span>
                   {{ report.area_name || 'Area comunale' }}
                 </p>
 
@@ -139,9 +135,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     <div class="container my-5 pb-5">
       <div class="callout callout-highlight callout-primary">
         <div class="callout-title">
-          <svg class="icon">
-            <use href="#it-info-circle"></use>
-          </svg>
+          <BIIcon name="it-info-circle" />
           Partecipa alla cura della tua città
         </div>
         <p>