Category: React

React Icons is a library with lots of icons we can add to our React app.

In this article, we’ll look at how to add icons to our React app with React Icons.

Material Design Icons

We can add Material Design icons from the react-icons/md collection.

For instance, we can write:

import React from "react";
import { Md3DRotation } from "react-icons/md";

export default function App() {
  return (
    <h3>
      <Md3DRotation />
    </h3>
  );
}

to add an icon from the collection.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=md

Remix Icon

React Icons comes with the Remix Icon collection.

We can import them from the react-icons/ri module.

For instance, we can write:

import React from "react";
import { RiAncientGateLine } from "react-icons/ri";

export default function App() {
  return (
    <h3>
      <RiAncientGateLine />
    </h3>
  );
}

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=ri

Simple Icons

The Simple Icons collection is included with the React Icon’s react-icons/si module.

For instance, we can write:

import React from "react";
import { Si1001Tracklists } from "react-icons/si";

export default function App() {
  return (
    <h3>
      <Si1001Tracklists />
    </h3>
  );
}

to add the icon.

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=si

Typicons

The Typicons collection is included with the React Icons’s react-icons/ti module.

For instance, we can write:

import React from "react";
import { TiAdjustBrightness } from "react-icons/ti";

export default function App() {
  return (
    <h3>
      <TiAdjustBrightness />
    </h3>
  );
}

to add the icon.

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=ti

VS Code Icons

React Icons comes with the icons used by the Visual Studio Code code editor.

The icons are included in the react-icons/vsc collection.

For example, we can write:

import React from "react";
import { VscAccount } from "react-icons/vsc";

export default function App() {
  return (
    <h3>
      <VscAccount />
    </h3>
  );
}

to add an icon from the collection.

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=vsc

Weather Icons

We can add weather icons from the Weather Icons collection.

They’re included in the react-icons/wi collection.

To add one, we write:

import React from "react";
import { WiAlien } from "react-icons/wi";

export default function App() {
  return (
    <h3>
      <WiAlien />
    </h3>
  );
}

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=wi

css.gg

React Icons comes with the css.gg icon collection.

They’re included in the react-icons/gg module.

To add one, we write:

import React from "react";
import { CgAbstract } from "react-icons/cg";

export default function App() {
  return (
    <h3>
      <CgAbstract />
    </h3>
  );
}

to add an icon from the collection.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=cg

Conclusion

We can add icons from various icon libraries into our React app with React Icons.

React Icons is a library with lots of icons we can add to our React app.

In this article, we’ll look at how to add icons to our React app with React Icons.

Game Icons

We can add icons from the Game Icons library with the react-icons/gi module.

For instance, we write:

import React from "react";
import { Gi3DGlasses } from "react-icons/gi";

export default function App() {
  return (
    <h3>
      <Gi3DGlasses />
    </h3>
  );
}

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=gi

Github Octicons icons

We can add Github Octicons icons into our React app with the react-icons/go module.

For example, we write:

import React from "react";
import { GoAlert } from "react-icons/go";

export default function App() {
  return (
    <h3>
      <GoAlert />
    </h3>
  );
}

We can find a list of Github Octicons icons at https://react-icons.github.io/react-icons/icons?name=go

Grommet-Icons

React Icons comes with a collection of Grommet-Icons.

We can add them with the react-icons/gr module.

For instance, we can write:

import React from "react";
import { GrAccessibility } from "react-icons/gr";

export default function App() {
  return (
    <h3>
      <GrAccessibility />
    </h3>
  );
}

to add an icon from the module.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=gr

Heroicons

React Icons comes with the Heroicons icon collection. We can import them from the react-icons/hi module.

For instance, we can write:

import React from "react";
import { HiAdjustments } from "react-icons/hi";

export default function App() {
  return (
    <h3>
      <HiAdjustments />
    </h3>
  );
}

to add the icon.

The full list of Heroicons can be found at https://react-icons.github.io/react-icons/icons?name=hi

IcoMoon Free

React Icons comes with the IcoMoon Free icon collection.

We can import them from the react-icons/im module.

For instance, we can write:

import React from "react";
import { ImHome } from "react-icons/im";

export default function App() {
  return (
    <h3>
      <ImHome />
    </h3>
  );
}

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=im

Ionicons 4

React Icons comes with the Ionicons 4 icon collection.

For example, we can add it by writing:

import React from "react";
import { IoIosAddCircleOutline } from "react-icons/io";

export default function App() {
  return (
    <h3>
      <IoIosAddCircleOutline />
    </h3>
  );
}

to add an icon.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=io

Ionicons 5

We can add icons from the Ionicons 5 collection from the react-icons/io5 module.

For example, we can write:

import React from "react";
import { IoAccessibilityOutline } from "react-icons/io5";

export default function App() {
  return (
    <h3>
      <IoAccessibilityOutline />
    </h3>
  );
}

to add an icon from the collection.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=io5

Conclusion

We can add icons from various icon libraries into our React app with React Icons.

React Icons is a library with lots of icons we can add to our React app.

In this article, we’ll look at how to add icons to our React app with React Icons.

Installation

We can install the package by running:

npm install react-icons --save

Add Icons

Once we installed the package, we can add an icon by importing the icon component:

import React from "react";
import { FaBeer } from "react-icons/fa";

export default function App() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

Ant Design Icons

We can add Ant Design icons with the react-icons/ai module:

import React from "react";
import { AiFillAccountBook } from "react-icons/ai";

export default function App() {
  return (
    <h3>
      <AiFillAccountBook />
    </h3>
  );
}

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=ai

Bootstrap Icons

We can add Bootstrap icons with the react-icon/bs module:

import React from "react";
import { BsFillAlarmFill } from "react-icons/bs";

export default function App() {
  return (
    <h3>
      <BsFillAlarmFill />
    </h3>
  );
}

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=bs

BoxIcons

We can add BoxIcons from the react-icon/bi module:

import React from "react";
import { BiAbacus } from "react-icons/bi";

export default function App() {
  return (
    <h3>
      <BiAbacus />
    </h3>
  );
}

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=bi

Devicons

We can add Devicons from the react-icons/di module.

For instance, we write:

import React from "react";
import { DiAndroid } from "react-icons/di";

export default function App() {
  return (
    <h3>
      <DiAndroid />
    </h3>
  );
}

to add the Android icon.

The full list of Devicons is at https://react-icons.github.io/react-icons/icons?name=di

Feather Icons

We can add Feather Icons from the react-icons/fi module.

For example, we write:

import React from "react";
import { FiActivity } from "react-icons/fi";

export default function App() {
  return (
    <h3>
      <FiActivity />
    </h3>
  );
}

to add the activity icon.

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=fi

Flat Color Icons

We can add Flat Color Icons from the react-icons/fc module.

For instance, we write:

import React from "react";
import { FcAbout } from "react-icons/fc";

export default function App() {
  return (
    <h3>
      <FcAbout />
    </h3>
  );
}

to add the about icon.

The full list of Flat Color icons is at https://react-icons.github.io/react-icons/icons?name=fc

Font Awesome

Font Awesome icons can be added with the react-icons/fa module.

To add one, we write:

import React from "react";
import { Fa500Px } from "react-icons/fa";

export default function App() {
  return (
    <h3>
      <Fa500Px />
    </h3>
  );
}

to add the Font Awesome icon.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=fa

Conclusion

We can add icons from various icon libraries into our React app with React Icons.

Wouter is a library that lets us loading React components according to URLs.

In this article, we’ll look at how to add routing to a React app with Wouter.

Active Links

We can set the active link by checking the isActive variable returned from the useRoute prop.

For instance, we can write:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};

const ActiveLink = (props) => {
  const [isActive] = useRoute(props.href);

  return (
    <Link {...props}>
      <a className={isActive ? "active" : ""}>{props.children}</a>
    </Link>
  );
};

export default function App() {
  return (
    <div>
      <style>
        {`.active {
            font-weight: bold
          }`}
      </style>
      <Router>
        <ActiveLink href="/users/foo">Users</ActiveLink>
        <ActiveLink href="/about">About</ActiveLink>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

We have the ActiveLink component that calls the useRoute hook with the current URL and returns an array with the isActive variable.

isActive is true means the link for the current URL is active.

Trailing Slash

We can make Wouter match a route with the trailing slash with a custom URL matcher.

For instance, we can write:

import React from "react";
import { Route, Router } from "wouter";
import makeMatcher from "wouter/matcher";
import { pathToRegexp } from "path-to-regexp";

const customMatcher = makeMatcher((path) => {
  let keys = [];
  const regexp = pathToRegexp(path, keys, { strict: true });
  return { keys, regexp };
});

export default function App() {
  return (
    <div>
      <Router matcher={customMatcher}>
        <Route path="/foo">foo</Route>
        <Route path="/foo/">/foo/</Route>
      </Router>
    </div>
  );
}

We call makeMatcher with a callback to return an object with an object with strict set to true .

This will make sure that URLs with a trailing and without but otherwise are the same are considered different.

Nested Paths

We can add nested paths by setting the base path.

For instance, we can write:

import React from "react";
import { Link, Route, Router, useLocation, useRouter } from "wouter";

const NestedRoutes = (props) => {
  const router = useRouter();
  const [parentLocation] = useLocation();

  const nestedBase = `${router.base}${props.base}`;
  if (!parentLocation.startsWith(nestedBase)) return null;

  return (
    <Router base={nestedBase} key={nestedBase}>
      {props.children}
    </Router>
  );
};

export default function App() {
  return (
    <div>
      <Router>
        <Route path="/about">about</Route>
        <NestedRoutes base="/dashboard">
          <Link to="/users" />
          <Route path="/users">users</Route>
        </NestedRoutes>
      </Router>
    </div>
  );
}

We created the NestedRoutes component that takes the base prop to set the base path.

From it, we created the nestedBase variable by combining router.base and props.base to create the base path.

Then we set the base prop’s value to nestedBase to set the nested routes’ base path.

Conclusion

We can check which link is active, adding trailing slash matches, and nested paths with Wouter.

Wouter is a library that lets us loading React components according to URLs.

In this article, we’ll look at how to add routing to a React app with Wouter.

Redirect

We can redirect to another route component with the setLocation function.

For instance, we can write:

import React from "react";
import { Route, Router, useLocation } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};
export default function App() {
  const [, setLocation] = useLocation();

  return (
    <div>
      <a href="#" onClick={() => setLocation("/about")}>
        About
      </a>
      <Router>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name">
          {(params) => <div>Hello, {params.name}!</div>}
        </Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

We call the useLocation hook to return the setLocation function.

Then we call that in the onClick handler to go to the /about route.

Matching Dynamic Segments

We can use the useRoute hook to match dynamic route segments.

For instance, we write:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};

export default function App() {
  return (
    <div>
      <Router>
        <Link href="/users/foo">Users</Link>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

In the UserPage , we call the useroute hook with the route pattern to get the name parameter from the params oject.

In the Route ‘s path prop, we have the :name placeholder to add the placeholder.

We can also match the /foo?/:bar* pattern to add the wildcard bar placeholder.

/foo/baz? has the optional baz placeholder.

And /foo/bar+ with bar being one or more segments is also supported for matching.

Base Path

We can add a base path with the Router component’s base prop.

For instance, we write:

import React from "react";
import { Link, Route, Router, useRoute } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

const UserPage = () => {
  const [, params] = useRoute("/users/:name");
  return <div>Hello, {params.name}!</div>;
};

export default function App() {
  return (
    <div>
      <Router base="/app">
        <Link href="/users/foo">Users</Link>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name" component={UserPage}></Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

to set the base path to /app .

Default Route

We can add a default route by adding the Route component without adding the path prop.

For instance, we write:

import React from "react";
import { Route, Switch } from "wouter";

export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route>Not Found</Route>
      </Switch>
    </div>
  );
}

to add the Not Found route.

The default route should always come last so the other patterns can be checked before showing the not found route.

Conclusion

We can add redirects, match dynamic route segments, set the base path, and add a default route with Wouter into our React app.