Skip to content

new icons #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
benhalverson wants to merge 1 commit into from
Closed

new icons #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
36 changes: 36 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 2 additions & 14 deletions src/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Icon } from "@magicons/react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

Expand Down Expand Up @@ -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" />
Copy link

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Icon component is missing the sizing classes (w-5 h-5) that were present on the original SVG element. This will cause the icon to render at an incorrect size.

Suggested change
<Icon src="@hero-MagnifyingGlass" />
<Icon src="@hero-MagnifyingGlass" className="w-5 h-5" />

Copilot uses AI. Check for mistakes.
</button>
</form>
);
Expand Down
11 changes: 8 additions & 3 deletions src/pages/Product.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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"
/>
Expand Down
16 changes: 2 additions & 14 deletions src/pages/SearchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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" />
Copy link

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Icon component is missing styling classes that were present in the original SVG (w-16 h-16 mx-auto). This will cause the icon to render at a different size and position than intended.

Suggested change
<Icon src="@hero-MagnifyingGlass" />
<Icon src="@hero-MagnifyingGlass" className="w-16 h-16 mx-auto" />

Copilot uses AI. Check for mistakes.
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">
No products found
Expand Down
6 changes: 5 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" }]
}
2 changes: 2 additions & 0 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Copy link

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon at the end of the import statement. Add a semicolon for consistency with other import statements in the file.

Suggested change
import { magicons } from 'magicons'
import { magicons } from 'magicons';

Copilot uses AI. Check for mistakes.


const isAnalyze = process.env.ANALYZE === 'true';


export default defineConfig({
plugins: [viteReact(), tailwindcss(),
magicons(),
(isAnalyze) &&
visualizer({
filename: 'stats.html',
Expand Down