use icon font to avoid SVG cross-domain restriction

sourcecode/hub/resources/css/app.scss

@@ -1,13 +1,7 @@
 @import "bootstrap/scss/bootstrap";
 @import '@fontsource/lato';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
 
 :root {
     --bs-font-sans-serif: Lato, sans-serif;
 }
-
-.bi {
-    display: inline-block;
-    vertical-align: -0.125em;
-    width: 1em;
-    height: 1em;
-}

sourcecode/hub/resources/views/components/icon.blade.php

@@ -1,15 +1,9 @@
-@php use Illuminate\Support\Facades\Vite; @endphp
-<svg {{ $attributes->except(['name', 'label'])->merge([
-    'class' => 'bi',
-    'width' => 16,
-    'height' => 16,
-    'fill' => 'currentColor',
+<span {{ $attributes->except(['name', 'label'])->merge([
+    'class' => 'bi bi-' . $name,
     ...(isset($label) ? [
         'aria-label' => $label,
         'role' => 'img',
     ] : [
         'aria-hidden' => 'true',
     ]),
-]) }}>
-    <use xlink:href="{{ Vite::asset('node_modules/bootstrap-icons/bootstrap-icons.svg') }}#{{ $name }}" />
-</svg>
+]) }}></span>