Breadcrumb with Icon (Alternate)

1import { ChevronsRight, Component, Home } from "lucide-react";
2import {
3  Breadcrumb,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbList,
7  BreadcrumbPage,
8  BreadcrumbSeparator,
9} from "@/registry/ui/breadcrumb";
10 
11const BreadcrumbsWithIcon = () => {
12  return (
13    <Breadcrumb>
14      <BreadcrumbList>
15        <BreadcrumbItem>
16          <BreadcrumbLink href="#">
17            <Home className="h-4 w-4" />
18          </BreadcrumbLink>
19        </BreadcrumbItem>
20        <BreadcrumbSeparator>
21          <ChevronsRight />
22        </BreadcrumbSeparator>
23        <BreadcrumbItem>
24          <BreadcrumbLink href="#/components">
25            <Component className="h-4 w-4" />
26          </BreadcrumbLink>
27        </BreadcrumbItem>
28        <BreadcrumbSeparator>
29          <ChevronsRight />
30        </BreadcrumbSeparator>
31        <BreadcrumbItem>
32          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
33        </BreadcrumbItem>
34      </BreadcrumbList>
35    </Breadcrumb>
36  );
37};
38 
39export default BreadcrumbsWithIcon;