feature/book-card (#3)

Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #3

js/icons/arrow-right.js

@@ -0,0 +1,30 @@
+/**
+ * Arrow Right Icon (Lucide)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 24)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function arrowRightIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14"/>
+      <path d="m12 5 7 7-7 7"/>
+    </svg>
+  `;
+}

js/icons/mic.js

@@ -23,9 +23,9 @@ export function micIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+      <path d="M12 19v3"/>
       <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-      <line x1="12" x2="12" y1="19" y2="22"/>
+      <rect x="9" y="2" width="6" height="13" rx="3"/>
     </svg>
   `;
 }

js/icons/plus.js

@@ -0,0 +1,30 @@
+/**
+ * Plus Icon (Lucide)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 24)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function plusIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14"/>
+      <path d="M12 5v14"/>
+    </svg>
+  `;
+}

js/icons/search.js

@@ -23,8 +23,8 @@ export function searchIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
+      <path d="m21 21-4.34-4.34"/>
       <circle cx="11" cy="11" r="8"/>
-      <path d="m21 21-4.3-4.3"/>
     </svg>
   `;
 }

js/icons/shopping-bag.js

@@ -23,9 +23,9 @@ export function shoppingBagIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
-      <path d="M3 6h18"/>
-      <path d="M16 10a4 4 0 0 1-8 0"/>
+      <circle cx="8" cy="21" r="1"/>
+      <circle cx="19" cy="21" r="1"/>
+      <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>
     </svg>
   `;
 }

js/icons/user.js

@@ -23,8 +23,9 @@ export function userIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <circle cx="12" cy="8" r="5"/>
-      <path d="M20 21a8 8 0 0 0-16 0"/>
+      <path d="M18 20a6 6 0 0 0-12 0"/>
+      <circle cx="12" cy="10" r="4"/>
+      <circle cx="12" cy="12" r="10"/>
     </svg>
   `;
 }