new icons

Author: benhalverson

package.json

@@ -44,6 +44,8 @@
   "devDependencies": {
     "@biomejs/biome": "2.3.1",
     "@cloudflare/workers-types": "^4.20251014.0",
+    "@magicons/hero-icons": "^0.0.3",
+    "@magicons/react": "^0.0.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -58,6 +60,7 @@
     "@vitest/coverage-v8": "^4.0.4",
     "autoprefixer": "^10.4.21",
     "jsdom": "^27.0.1",
+    "magicons": "^0.0.3",
     "playwright": "^1.56.1",
     "rollup-plugin-visualizer": "^6.0.5",
     "tailwindcss": "^4.1.16",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import { Icon } from "@magicons/react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -61,20 +62,7 @@ export function SearchBar({
       <button
         type="submit"
         className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-r-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
-        <svg
-          className="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg">
-          <title>Search</title>
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          />
-        </svg>
+        <Icon src="@hero-MagnifyingGlass" />
       </button>
     </form>
   );

src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { ShoppingBagIcon, UserIcon } from "@heroicons/react/24/outline";
+import { Icon } from "@magicons/react";
 import { lazy, Suspense, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import ColorPicker from "../components/ColorPicker";
@@ -55,13 +55,18 @@ export default function ProductPage() {
                   href="/profile"
                   className="p-2 text-gray-400 hover:text-gray-500 lg:ml-4">
                   <span className="sr-only">Account</span>
-                  <UserIcon aria-hidden="true" className="h-6 w-6" />
+                  <Icon
+                    src="@hero-User"
+                    aria-hidden="true"
+                    className="h-6 w-6"
+                  />
                 </a>
 
                 {/* Cart */}
                 <div className="ml-4 flow-root lg:ml-6">
                   <Link to="/cart" className="group -m-2 flex items-center p-2">
-                    <ShoppingBagIcon
+                    <Icon
+                      src="@hero-ShoppingBag"
                       aria-hidden="true"
                       className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-gray-500"
                     />

src/pages/Product.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "@magicons/react";
 import { useEffect, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { BASE_URL } from "../config";
@@ -111,20 +112,7 @@ export default function SearchResults() {
         {products.length === 0 && query ? (
           <div className="text-center py-12">
             <div className="text-gray-400 mb-4">
-              <svg
-                className="w-16 h-16 mx-auto"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <title>No products found</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1}
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                />
-              </svg>
+              <Icon src="@hero-MagnifyingGlass" />
             </div>
             <h3 className="text-lg font-medium text-gray-900 mb-2">
               No products found

src/pages/SearchResults.tsx

@@ -21,9 +21,13 @@
     "noFallthroughCasesInSwitch": true,
     "types": [
       "@cloudflare/workers-types/2023-07-01",
-      "vitest"
+      "vitest",
+      "@magicons/hero-icons",
+      "@magicons/lucide-icons",
+      "@magicons/mdi-icons"
     ]
   },
+  
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.json

@@ -2,13 +2,15 @@ import tailwindcss from '@tailwindcss/vite';
 import viteReact from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import { visualizer } from "rollup-plugin-visualizer";
+import { magicons } from 'magicons'
 
 
 const isAnalyze = process.env.ANALYZE === 'true';
 
 
 export default defineConfig({
   plugins: [viteReact(), tailwindcss(),
+    magicons(),
     (isAnalyze) &&
       visualizer({
         filename: 'stats.html',