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
46
votes
13 answers

How to Style React-Icons

I am trying to figure out how to style icons that I import using react-icons. In particular, I would like to be able to create a look similar to this: That is to say, I'd like to add a background color, padding, border-radius, etc. However, I…
Moshe
  • 6,011
  • 16
  • 60
  • 112
13
votes
4 answers

Is it possible to only show half of a SVG icon?

I currently have a rating system that produces 5 stars that can show half values. I did this by using FontAwesome's Half Stars and did some CSS tricks to make them look like one star. But I was thinking of increasing my React and CSS knowledge by…
4156
  • 380
  • 4
  • 17
11
votes
3 answers

react-icons apply a linear gradient

I would like to dynamically, partially fill a react-icons sourced Font Awesome Star using linear gradient. I have tried the following: React Component with Inline Style - Setting the background of the parent span to gradient and making the SVG…
JasonA
  • 241
  • 2
  • 5
  • 13
6
votes
4 answers

React App failed to load and displayed "Aw Snap!" in chrome browser without console error

Note: You can download the whole project here. It's basically a practice project following the youtube tutorial from JSMastery here. Symptoms It crahsed in chrome browser It also crashed like this in Microsoft Edge. I used another profile in…
Shane Li
  • 73
  • 1
  • 9
4
votes
2 answers

typescript correct type for svg component passed as prop

I am building a button component: interface ButtonProps { startIcon?: ... <-- what type? } const Button = ({startIcon: StartIcon}) => { return } // usage
Sam
  • 375
  • 1
  • 5
  • 15
4
votes
2 answers

IO icons from "react icons" not importing

I've installed the react-icons module correctly with npm, and everything is working great. I can import icons without any errors, but sadly whenever I try and import an icon with Io before it like IoSettingsSharp IoSettingsOutline etc. simply…
Buddy Bob
  • 5,829
  • 1
  • 13
  • 44
4
votes
4 answers

Rendering a component using a variable in React

I have a list of react-icons passed through props in a "Card Component". In my Card component's render method, I have something like this: render() { ... { this.props.icons.map(icon => { return (
Jam Dos
  • 119
  • 1
  • 2
  • 6
4
votes
2 answers

Display text when hovering over an icon using React-Icon Library

so I am attempting to display text when you hover over a mouse. I am using React-Icons library and for styling using Styled-Components I have 4 icons on my navbar - Home - About - Skills - Work Each button is its own component in order for the hover…
Lenny Gonzalez
  • 123
  • 1
  • 1
  • 8
4
votes
2 answers

React-icons responsive size

How can I make react-icons icons size smaller for mobile? I understand pixel is not a good approach, but how should I do it? import { FaSearch, FaFacebook, FaInstagram, FaUserCog, FaUserTimes } from "react-icons/fa";
nanquim
  • 1,786
  • 7
  • 32
  • 50
4
votes
0 answers

Full Calendar React icon component as custom header button

I'm trying to add an icon taken from the react-icons package as a custom header button in my Full Calendar. Because the icons are exported from the package and not used as class names I can't seem to render that icon or any icons for that matter. I…
Nats
  • 160
  • 3
  • 20
3
votes
1 answer

Is there a way to use a 'react-icon' with React Native?

Im actually writing a code in React native but while using react-icon I still don't know how to import an icon on my project. I've tried with components such as Image but I don't see them on my Screen. Please help me, below I share the code: import…
Leonardo
  • 123
  • 2
  • 13
3
votes
1 answer

Menu not opening when clicking on react-icons icon

I have a menu that should open when I click on a button. and close when I click the button again or click outside the menu. It works right but it has a bug when I click on svg icon inside button, and it does not work, the menu does not open. const…
Ahmad MRF
  • 1,346
  • 1
  • 6
  • 16
3
votes
3 answers

6 high severity vulnerabilities in react-icons 4.4.0

# npm audit report nth-check <2.0.1 Severity: high Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr fix available via `npm audit fix --force` Will install react-scripts@2.1.3, which is…
Ameen NA
  • 39
  • 1
  • 1
  • 5
3
votes
2 answers

PrimeReact in combination with react-icons

I was wondering if it is somehow possible to use the icons from the react-icons package in PrimeReact, since the primeIcons package unfortunately does not contain all the icons I need for my project. I haven't found a solution for this, because…
user17145524
  • 227
  • 4
  • 10
3
votes
7 answers

How to use "react-icons" in loop (Map method) in ReactJS

I'm using React-icons in my ReactJS project and I just wanted to loop (by Map method) the specific icons in each JSX field when data is render. In other word, I want this{`<${e.contact.icons}/>`}in JSX code. Here is my code section:- Here is, I…
DSDmark
  • 1,045
  • 5
  • 11
  • 25
1
2 3
…
9 10