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

app/components/Footer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import MemberDot from "~/components/MemberDot.vue";
+import BIIcon from "~/components/BIIcon.vue";
 import { useMembers } from "~/composables/useMembers";
 
 const { sortedMembers } = useMembers();
@@ -14,7 +15,7 @@ const { sortedMembers } = useMembers();
             <div class="col-sm-12">
               <div class="it-brand-wrapper">
                 <a href="#" data-focus-mouse="false">
-                  <svg class="icon"><use xlink:href="https://italia.github.io/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
+                  <BIIcon name="it-code-circle" />
                   <div class="it-brand-text">
                     <h2>Visione</h2>
                     <h3 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>

app/components/Header.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import BIIcon from "~/components/BIIcon.vue";
 
 const route = useRoute()
 
@@ -27,10 +28,10 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
         <div class="row">
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">
-              <a class="d-none d-lg-block navbar-brand" href="#">Dipartimento della Pubblica Sicurezza</a>
+              <a class="d-none d-lg-block navbar-brand" href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza">Dipartimento della Pubblica Sicurezza</a>
               <div class="nav-mobile">
                 <nav aria-label="Navigazione secondaria">
-                  <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="#menuC2" role="button" aria-expanded="false" aria-controls="menuC2">
+                  <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza" role="button" aria-expanded="false" >
                     <span>Dipartmento della Pubblica Sicureazza</span>
                     <BIIcon name="it-expand" />
                   </a>

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">
+          <div class="mb-3">
-            <use href="#it-camera"></use>
+            <BIIcon name="it-camera" size="xl" color="primary" />
-          </svg>
+          </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">
+          <div class="mb-3">
-            <use href="#it-tool"></use>
+            <BIIcon name="it-tool" size="xl" color="primary" />
-          </svg>
+          </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">
+          <div class="mb-3">
-            <use href="#it-star-outline"></use>
+            <BIIcon name="it-star-outline" size="xl" color="primary" />
-          </svg>
+          </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">
+          <BIIcon name="it-arrow-right" />
-            <use href="#it-arrow-right"></use>
-          </svg>
         </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">
+                  <BIIcon name="it-check-circle" size="sm" color="success" />
-                    <use href="#it-check-circle"></use>
-                  </svg>
                   <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">
+                  <span class="me-1"><BIIcon name="it-map-marker-circle" size="xs" /></span>
-                    <use href="#it-map-marker-circle"></use>
-                  </svg>
                   {{ 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">
+          <BIIcon name="it-info-circle" />
-            <use href="#it-info-circle"></use>
-          </svg>
           Partecipa alla cura della tua città
         </div>
         <p>

nuxt.config.ts

@@ -28,6 +28,7 @@ export default defineNuxtConfig({
 
   fonts: {
     families: [
+      { name: 'Lora', provider: 'google' },
       { name: 'Roboto Mono', provider: 'google' },
       { name: 'Titillium Web', provider: 'google' }
     ]