reactjs - How to change the filling of the svg icon in the header according to the route?

Question

I'm trying to make a system that populates my svg icon automatically if we're on the activeClassName = 'current', I'm using react-router-dom for navigation and react-icon for svg icons. I would like that when the user is on 'Home' the svg icon is filled and the same for the other pages. There is on ionicon v5 (what I use for icons) a filled and unfilled format for each icon for example: <Icon.IoHome> for the filled and <Icon.IoHomeOutline> for the unfilled.

import React from 'react';
import './Nav.css';
import { NavLink } from 'react-router-dom';
import * as Icon from 'react-icons/io5';

export default function Nav() {

    return (
        <header className="header">
            <div className="left">
                <NavLink exact to="/">
                    <h1 className="title">Lust</h1>
                </NavLink>
            </div>
            <div className="right">
                <NavLink exact activeClassName="current" to="/">
                    <Icon.IoHome /> // If we are in /
                </NavLink>
                <NavLink exact activeClassName="current" to="/profil">
                    <Icon.IoPersonCircle /> // If we are in /profil
                </NavLink>
                <NavLink exact activeClassName="current" to="/a-propos">
                    <Icon.IoInformationCircle /> // If we are in /a-propos
                </NavLink>
            </div>
        </header>
    )

}

question from:https://stackoverflow.com/questions/65854081/how-to-change-the-filling-of-the-svg-icon-in-the-header-according-to-the-route

Answer 1

Waitting for answers