🎁 The Js-Craft Guide to React is now available with a 30% off discount!

Using React Icons with the NextJs 13 app folder

We have seen in a previous article how to use the Font Awesome icons in NextJs.

A reader emailed me and asked how to use React Icons as an alternative to Font Awesome. Did not even know about this icon set so went and played with it a bit.

It turns out React Icons are pretty easy to use and are quite a nice icon source. Let's see!

Installing React Icons in a NextJs app

The first step will be to install the icon library. A simple install is all that we need:

npm i react-icons

Using React Icons in NextJs

After the installation is done we just need to import the icons and use them:

// app/page.js
import { FaBeer } from 'react-icons/fa';

export default function Page() {
  return <>
    <h3> Ready for a good <FaBeer />? </h3>
  </>
}

Below you have the output of this code:

screenshot with arrows pointing to React Icons in a NextJs app

You can head out to the official site and browse the full list of icons.

Just note that each icon is placed in a given set. So, be sure to import the correct set:

import { BiCycling, BiBeer } from 'react-icons/bi';
import { FaYoutube } from 'react-icons/fa';

Specifying extra properties for your React Icons

Besides the default output of an icon component we can set some extra properties to customize them:

<FaYoutube size="2em" color="red" />

The full list of currently supported properties:

  • color
  • size (default 1em)
  • className
  • style (will overwrite size and color)
  • attr
  • title

You can even use a React Context so that you can set up the general settings for the icons:

import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
    <FaFolder />
</IconContext.Provider>;

Check out the full documentation here.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.


Leave a Reply

Your email address will not be published. Required fields are marked *

📘 The Guide to React Home Screencasts Best of Newsletter Search X

📘 - 10 Javascript AI projects with React and LangChain

Hi friend! Before you go, just wanted to let you know about the 10 Javascript AI projects ideas with React and LangChain FREE ebook.

One of the best ways to learn is by doing the work. Choose from these 10 project ideas and start working on topics such as:

  • How does LangChain work
  • Connecting to OpenAI LLM
  • Create AI Agents
  • Simple and Sequential Chains
  • Adding Memory (Chat Context)
  • Prompt Templates
  • Using OutputParsers and Tools for Agents
  • Work with Documents and more...

Keep building and see the new capabilities LLM models can add to your React app! Get all projects as an ebook right to your inbox!

X