Kevin Powell - Community•2y ago

Ionicons not working with "classname" in Reactjs.

I had className in my JSX on Ionicon element but it was never read properly by browser so I changed the directive's name to class and it worked . Why is this happening? Supposing that in React we always use className instead of class.

4 Replies

! BazingaOP•2y ago

For eg:

export default function Navbar() {
  return (
    <div class="navbar">
      <ion-icon class="navbar__img" name="earth-outline"></ion-icon>
      <h1>My Travel Journal</h1>
    </div>
  );
}

export default function Navbar() {
  return (
    <div class="navbar">
      <ion-icon class="navbar__img" name="earth-outline"></ion-icon>
      <h1>My Travel Journal</h1>
    </div>
  );
}

Here If I use give class name using "className" I'm unable to style the component as it doesn't recognises a class with "navbar".

Unknown User•2y ago

Message Not Public

! BazingaOP•2y ago

Oh wow, thanks! I didn't know they have different site for react icons. https://react-ionicons.netlify.app/

react-ionicons | A React SVG Ionicon component

Unknown User•2y ago

Message Not Public

Gaming

Programming

Ionicons not working with "classname" in Reactjs.