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
2
votes
1 answer
Change SVG icon color based on 'liked' status
I have an Upvote component in my React/TypeScript app that allows user to upvote a post, or remove their upvote. the upvote itself is an icon from the react-icons package, specifically from the Grommet-Icons section. When a user upvotes a post by…
Gavi Schneider
- 65
- 1
- 9
2
votes
5 answers
Material UI - Align icon to center with the Typography text
How do I align icon to the same level as the text. As of now, I see the icon is at little top to the text. I tried to use padding-top: 5px and also margin-top: 5px but that does not seem to work as expected.
…
coderpc
- 4,119
- 6
- 51
- 93
2
votes
1 answer
Fluent-Ui-React Icon Outline on Hover
I am a beginner in fluent-UI with react (@fluentui/react-northstar 0.47.0)
I tried different solutions but couldn't solve this result. Kindly guide me here.
Currently, when I hover mouse on the icon it turned filled but I want to keep them outline…
Magi
- 49
- 1
- 9
2
votes
2 answers
Calling a Component Via a Prop in ReactJS
I am creating a wrapper component for icons that I import using react-icons. Here is an example of how it looks right now:
import { FaTwitter as Twitter} from 'react-icons/fa'
import { Icon } from './elements
Now, this…
Moshe
- 6,011
- 16
- 60
- 112
1
vote
1 answer
Pass React Icon as props to Client Component in NextJS
I build a dynamic button:
'use client';
import type { IconType } from 'react-icons';
interface ButtonProps {
children: React.ReactNode;
Icon: IconType;
}
export default function Button(props: ButtonProps) {
const { children, Icon } =…
Huy Pham
- 17
- 4
1
vote
1 answer
Is there a way to make all icons the same size?
i wonder if there is a way to give all icosn of react-icons the same size?
Especially if you use different icon fonts.
In my case for example I have to use two different fonts, because one font doesn't provide the necessary icon, but this looks like…
user17145524
- 227
- 4
- 10
1
vote
1 answer
How can I add a link to another website using react-icons in Next.js
How can I add links to my react-icons. I want to link the LinkedIn button to my linked in and have a mailto option for the mail icon.
I am using Next.js and TailwindCSS to create my application.
Here is the snippet of my code.
joshua terrence
- 29
- 5
1
vote
2 answers
Warning:
I'm trying to automatically create React Elements from strings corresponding to the react-icons library. But I am getting the following errors in the console:
Warning:
Jeroen
- 11
- 1
- 3
1
vote
2 answers
Trouble defining types in NextJs with dynamic import - Typescript / NextJs
I've built a component that use next/dynamic to import react-icons when necessary, but I cannot find a correct way of defining typescript type for this component. The component in itself works.
Here is a link to codesandbox with typescript :…
Sygix
- 23
- 1
- 6
1
vote
3 answers
How can I create JSX elements from an array of React-Icon names?
import React from "react"
import {GiCard2Spades,GiCard3Spades} from "react-icons/gi"
const x = ["GiCard8Spades","GiCard9Spade"]
const y = x.map(item =>
{y}
)
I know I can…
James Hetfield
- 33
- 3
1
vote
1 answer
how to solve problem with Error: Missing "key" prop for element in array react/jsx-key when I map react-icons?
I tried many methods to display dynamically Icons,but this one work in my case:
{logo?.map((logos, index )=> {return (
user19715801
1
vote
1 answer
VS Code Intelli-sense does not show suggestions for react-icons even after installing react-icons properly using npm
I installed react-icons library using the command,
npm install react-icons --save
It installed well.
Then I tried writing import statement for importing IoIosStarOutline icon in VS Code editor, then its intelli-sense does not suggest the name of…
Deepeshkumar
- 217
- 3
- 11
1
vote
1 answer
How can i make changes in imported react icon using styled components
I am using styled component library to style my website. I want to do changes in my imported react icon component.
for example: if I am use normal CSS then I can easy make changes in
by targeting tag in CSS.
but…
Het Patel
- 109
- 7
1
vote
2 answers
Make the input and button on the same line
I'm making a todo list app using react and chakra ui.
I want to make the input and the button on the same line.
This is what i get: photo
I want to make something like this: photo
My Code:
App.js:
import "./App.css";
import { ChakraProvider } from…
M7md-Dev
- 163
- 1
- 1
- 13
1
vote
2 answers
How can i route my Home component from the code below without throwing uncaught TypeError in the console
I'm having troubles displaying the Home component. How can I get this to work?
console display Uncaught TypeError: Cannot read properties of undefined (reading 'string')
at ./node_modules/react-icon/lib/index.js
I'm using
my versions are:
…
kaytee
- 11
- 2