From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Adding icons to the sidebar

Adding icons to the sidebar - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Adding icons to the sidebar

“

Now, the final step for sidebar is the icons. We will place icons for all the menu items like this. So I will use the icons from heroicons.com. It is actually built by Tailwind team and they offer the JSX as well as the SVG code icons which makes it easy to use and also keeps the performance optimal as compared to installing a full-fledged library. We will create components for each icon in a separate file named icons.jsx and from there we will import icons as and when needed. So let's create the file inside the components folder and inside it, I'll say export const home icon, the arrow function. Now let me open the site and I'll copy the JSX for this home icon and paste it over here. Now similarly I will create the component for users icon and copy the JSX for the user icon from here and paste it. Next I will take the swatch icon and search for swatch and copy the JSX and finally the shopping bag icon and paste it. That's it. Now that we have the icons, let's go to the sidebar…

Contents