Add Icon

[therockstarind]

bro i want to add icons to topbar links how can i do that.

j471n.in/utils/utils.ts

Line 5 in ab4d956

export const navigationRoutes: string[] = [

we want to add icon like this

[j471n]

You can do either of the following things:

1. You can customize the navigationRoutes make it an array of objects with route, Icon and some other properties if you want.
2. You can leave it as it is. Just add the switch case or a function that will give you the Icon based on route.

function getIcon(route) {
  switch(route) {
   case "/about":
     return <About />
  }
}

Something like that.

[therockstarind]

can you specify more bcz i do not understand?

[j471n]

You can do two things -

FIRST

const navigationRoutes = [
  {
    route: "/",
    name:"Home",
    Icon: <HomeIcon />
  },
//........more routes
// something like that
]

Then import this in your navbar and use it.

navigationRoutes.map(nav => (
   <Link href={nav.route}>
      {nav.Icon}
     <p>{nav.name}</p>
   </Link>
))

SECOND

const navigationRoutes = [
  "home",
  "about",
  "blog",
]

now what you can do is create a function that will return the Icon based on the navigation route name such as following:

// import icons...........

export function getIcon(route) {
  switch(route) {
   case "home"
     return <HomeIcon />
   case "about":
     return <AboutIcon />
   case "about":
     return <BlogIcon />
  }
}

// or the following one



export function getIcon(route) {
  switch(route) {
   case "home"
     return HomeIcon;
   case "about":
     return AboutIcon;
   case "about":
     return BlogIcon;
  }
}

Now then you can use it as following:

import { getIcon } from ".....path"

navigationRoutes.map(route=> {
  
   const Icon = getIcon(route);

   return (<Link href={`/${route}`}>
      {Icon} // <Icon /> (for second method)
     <p>{nav}</p>
   </Link>
  )
})

Try any of these.

For more info look at this code.