Usage
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
Docs.
Questions tagged [react-icons]
146 questions
0
votes
1 answer
Module not found: Can't resolve '@react-icons/all-files' in gatsby sanity project
I'm using sanity and gatsby for my project
after I installed react-icons with these command
npm install @react-icons/all-files --save
and import some icons to my project
import { BiHomeSmile } from "@react-icons/all-files/bi/BiHomeSmile";
and run…
Pedram Siavashi
- 135
- 1
- 7
0
votes
1 answer
What is wrong with my Router element in React JS?
My navbar icon doesn't show up and the console announce the mistake at App.js as:"Line 9: 'Router' is not defined react/jsx-no-undefct/jsx-no-undef".
I don't know what is wrong with my codes. Anybody can help me? Thank you so much!
This is my…
Ashley
- 73
- 6
0
votes
3 answers
React icons dynamically generate font awesome component
I am using the react-icons package in my react app. It works fine in the sense that you can import and use a font awesome icon in the following manner:
import { FaTag } from 'react-icons/fa';
...
Joshua Foxworth
- 1,236
- 1
- 22
- 50
0
votes
2 answers
How to change fontSize in react icon using styled components
I want to make hover effect with increase of icon size, icons are from react icons, I'm using styled components. How should I do it ?
export const BottomBar = () => {
const style = { fontSize: "180%" };
return (
…
marcinb1986
- 708
- 1
- 11
- 30
0
votes
1 answer
how to style svg in reactjs with styled components
import { FaRegHeart } from 'react-icons/fa';
const IconHeart = styled(FaRegHeart)`
width:21px;
height:18px;
position: absolute;
left: 28%;
top:30%;
cursor: pointer;
&:hover{
background-color:red;
}
`
function Heart() {
return (
…
Sava
- 113
- 1
- 13
0
votes
1 answer
React-Icons: Icon not aligning with Text
I am using react-icons in one of my projects and I am not able to align the icons (vertically) with the text. Following is what I am getting currently.
As you can see -- The icons are a little higher than the text.
Following is my HTML code:
Sumanth Jois
- 3,146
- 4
- 27
- 42
0
votes
1 answer
Make sure to start component names with a capital letter
Problem
I'm having an error using react-icons trying to use it:
in header.js I checked for uncapitalized first letter but all of them were correct:
Pirogrammer
- 150
- 3
- 18
0
votes
2 answers
React - How to specify an icon in an object as a value
I have an array with objects before, I applied icons from fontAwesome as a value, it looked like this
const SideBarColors = [
{
IconStyle: {
Icon: faDotCircle,
}
}
]
Then in another component I got this icon like…
Synchro
- 1,105
- 3
- 14
- 44
0
votes
2 answers
Changing a Component inside another Component/react-icons
I'm building a rating component that takes in a number of icons and displays them using react-icons. My question however is for a feature that I would like to implement. Currently, the react-icon that I'm using is FaStarhalf which is a pre-filled…
4156
- 380
- 4
- 17
0
votes
1 answer
React icons - Change background color
Currently working with react-icons on a website and having trouble with svg's and styling.
What I've tried so far is using the React-Icons {IconContext.Provider} as shown on the git repo as well as using the fill, stroke. I've also tried to add a…
rwright94
- 45
- 1
- 7
0
votes
2 answers
How to use react-icons in gatsby but not affect performance?
they said that Installation (for meteorjs, gatsbyjs, etc) is
npm install @react-icons/all-files --save
Installation (for standard modern project)
npm install react-icons --save
what is the difference between the two installation, i m using the…
Jamal Mdawar
- 109
- 1
- 9
0
votes
2 answers
React Rendering Component React-Icons
How to render component based on json file information? I have a map that is rendering a UL list. Each Li is rendered. (I know i can do this with a img and than passing src={} as a object from the json file. But i wanna know if there's another way…
Iago Barreto
- 103
- 1
- 11
0
votes
1 answer
Pass component as a prop in Reactjs
I got an article showing how to pass a component as a prop, but I could not make it works, can anyone help me on it?
This is the example I got.
import React from "react";
import Foo from "./components/Foo";
import Bar from "./components/Bar";
const…
Rudson Rodrigues
- 345
- 4
- 23
0
votes
1 answer
Styled-components and react-icons component
i'm new to styled-components and i want to use from react icons this is my react component:
and this is my styled components code:
import { IconContext } from 'react-icons';
…
Med EL
- 25
- 3
- 7
0
votes
1 answer
react-icons and react Router
Context
i'm designing a navigation bar for my application and my proyect uses react-router and react-router-dom for managing routing and react-icons for icon retrieving.
Code
import React from 'react';
import { NavLink } from…
Esquilax
- 43
- 6