Stack Overflow
Stack Overflow

Questions tagged [react-icons]

Usage

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

Docs.

146 questions
1
vote
2 answers

How to change react icons while clicking it?

I have some icons from react-icons that I want to change from outline to filled whenever I click it but instead of changing itself, it changes all the icons from outline to filled. Here is my code function Header() { const [isActive, setIsActive]…
Chee Thong
  • 51
  • 2
  • 7
1
vote
2 answers

How to implement react icon properly with useState hook?

On React, I attempted making a feature to let user can see active feedback on screen by changing its icon when they click it. How can I let it change to another icon (e.g. from Box to BoxChecked) once I click it? note: I know this code line is the…
mireumireu
  • 705
  • 1
  • 7
  • 9
1
vote
2 answers

In Gatsby how to render React Icons dynamically from gatsby-config's menuLinks?

Following Gatsby's doc on Creating Dynamic Navigation in Gatsby I created a barebones menu and wanted to see if I can add React Icons' components to it: gatsby-config.js (stripped down) menuLinks:[ { name:'home', icon: 'AiFillHome', …
DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
1
vote
1 answer

Add react icon(s) dynamically to navbar item(s) in component

Bear with me, I'm learning React so I'm a beginner. I'm trying to create a bottom navigation panel. Rather than hardcoding each navbar element, I have found good examples of storing navbar elements in an array then mapping that onto your navbar. I…
JamesMatson
  • 2,522
  • 2
  • 37
  • 86
1
vote
1 answer

How to use react-icons with select-option form element?

I would like to know if it is possible use react-icons with the select-option elements. I google a lot about the problem but all the solutions were related to react-select library rather than the simple select-option elements. here's what i am…
Vaibhav Bisht
  • 87
  • 2
  • 14
1
vote
1 answer

Is there a way to import from react-icons dynamically by iterating through an array?

This will give an error but hopefully it shows pretty much but I want to do. I want to have a bunch of icons in my component (later on they will be links) but I'm wondering if there's a way to bring them in dynamically rather than hard-coding…
easymoney
  • 85
  • 5
1
vote
1 answer

Can't change color of React icons (BiHomeAlt, BiSlider , FaTasks)

In React you can change the color of an icon with icon context or the style attribute: but it's not working what did i wrong…
Jonas
  • 13
  • 5
1
vote
1 answer

React-icons module not found: can't resolve '../lib"

I've just installed react-icons and tried to import an icon and I get this error. ./node_modules/react-icons/fa/index.esm.js Module not found: Can't resolve '../lib' in '/Users/nathanbarry/Programming/personalsite/node_modules/react-icons/fa' I've…
Nathan Barry
  • 33
  • 5
1
vote
2 answers

react-icons/fa fails to install: Attempted import error: 'FaStar' is not exported from 'react-icons/fa'

I am trying to use react-icon FaStar in an app. I first created a component in a separate create-react-app and used FaStar successfully in that install. Then I transported the .js and .cs files to the create-react-app that I am developing. After…
Oss Kell
  • 53
  • 6
1
vote
1 answer

Setting IconContext.Provider cursor value? (This is being used with react-icons)

I know I can just inline style the cursor: "hover" onto the element in this Example, but there should be a way to make all icons in an element to contain the pointer cursor using IconContex.Provider from react-icons return ( <> …
Wayne
  • 660
  • 6
  • 16
1
vote
2 answers

Is it possible to pass props in react import

So I have this component name called "Technologies" where I'm using react-icons and passing it through props to different component name "Icon" or on a different page. Technologies Page: import Icon from './subcomponents/Icon'; const Technologies =…
Deepak Ranga
  • 123
  • 1
  • 1
  • 9
1
vote
0 answers

Attempted import error: 'FiMail' is not exported from 'react/icons/fa

It shows that there is some error while importing FiMail from react icon even after reinstalling the pack The Error: Attempted import error: 'FiMail' is not exported from 'react/icons/fa' import { FiMail } from 'react-icons/fa' import { …
Zoheb Ahmed
  • 37
  • 5
1
vote
6 answers

cannot change GR colors in react-icons

I found gr images cannot be changed color, do you know how to solve this problem? Thank you. import React from "react"; import "./styles.css"; import { GrAssistListening } from "react-icons/gr"; export default function App() { return (
…
Shark Deng
  • 960
  • 9
  • 26
1
vote
2 answers

React-icon used in an image tag src brings error

I am following this guide for ReactJS and ran into the aforementioned error while using an Img tag as designated by the guide. Google keep logo Leads to this error: Warning: Invalid value for prop `src` on tag.…
Greg Iven
  • 171
  • 2
  • 10
1
vote
1 answer

Use react-icons for pointStyles in Chart.js graph on Next.js app

Problem: I'm trying to use the react-icons MdNavigation icon as a pointStyle within Chart.js. The app is built in Next.js. If it's not possible to use react-icons for a chart.js pointStyle, I'm open to using an imported SVG, jpg or png icon, but…
PDill5446
  • 103
  • 1
  • 14
1 2 3
…
9 10