fix: externalise icons

js/components/book-card.js

@@ -93,9 +93,7 @@ class BookCard extends HTMLElement {
     const imageHtml = this.image
       ? `<img src="${this.image}" alt="${this.title}" class="book-image">`
       : `<div class="book-image placeholder">
-           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
-             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
-           </svg>
+           <book-open-icon size="48"></book-open-icon>
          </div>`;
 
     this.shadowRoot.innerHTML = `
@@ -164,11 +162,6 @@ class BookCard extends HTMLElement {
           align-items: center;
           justify-content: center;
           color: var(--color-text-light, #64748b);
-        }
-
-        .book-image.placeholder svg {
-          width: 48px;
-          height: 48px;
           opacity: 0.5;
         }