Skip to content

fix: use lucide-react Search icon instead of unicode emoji (#651) - #657

Merged
nonsobethel0-dev merged 2 commits into
Parashield-Protocol:mainfrom
laurastephaniee:fix/searchbar-lucide-icon-651
Sep 24, 2026
Merged

nonsobethel0-dev merged 2 commits into
Parashield-Protocol:mainfrom
laurastephaniee:fix/searchbar-lucide-icon-651

Conversation

@laurastephaniee

Copy link
Copy Markdown

Summary

Verified against current source: SearchBar.tsx rendered a raw 🔍 unicode character in a <span> instead of an icon component — confirmed inconsistent with the rest of the app, which uses lucide-react throughout (NavBar/Toast use X, Breadcrumb uses ChevronRight).

Fix

Replaced the emoji span with <Search size={16} aria-hidden="true" .../>, keeping the same positioning classes the emoji span had. Added aria-hidden="true" since it's purely decorative — the input's own placeholder text already conveys "search," matching the pattern already used for other decorative icons in this app.

Left the clear button's ✕ character untouched — out of scope for this issue, which only names the search icon at line 27.

Verification

  • npx tsc --noEmit — no new errors
  • npm run lint — no new warnings/errors
  • npx vitest run src/__tests__/SearchBar.test.tsx — 8/8 passing (existing suite, unchanged)

Test plan

  • Type-check and lint clean
  • Existing SearchBar test suite passes unchanged

Closes #651

…d-Protocol#651)

SearchBar rendered a raw 🔍 unicode character instead of an icon
component, inconsistent with the rest of the app (NavBar/Toast use X,
Breadcrumb uses ChevronRight, all from lucide-react).

Replaced with <Search size={16} aria-hidden="true" .../>, keeping the
same positioning classes as the emoji span. Marked aria-hidden since
it's purely decorative -- the input's own placeholder text already
conveys "search," matching the pattern used for other decorative
icons in this app.

Left the clear button's ✕ character untouched -- out of scope for
this issue, which only names the search icon.

Verified: npx tsc --noEmit and npm run lint show no new errors, and
the existing SearchBar test suite passes (8/8).

Closes Parashield-Protocol#651
@netlify

netlify Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for boisterous-sunshine-dd4c4c failed.

Name Link
🔨 Latest commit bdf151a
🔍 Latest deploy log https://app.netlify.com/projects/boisterous-sunshine-dd4c4c/deploys/6ab51b0b4f3b8b0008724177

@nonsobethel0-dev
nonsobethel0-dev merged commit 0f4f88e into Parashield-Protocol:main Sep 24, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug] SearchBar uses unicode magnifying glass emoji instead of icon component

2 participants