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
0
votes
1 answer

NextJS imports everything when trying to use dynamic imports with `react-icons`

I need to use an Icon from the react-icons package. Whenever I use it with an import statement, this is the bundle size I get: Route (pages) Size First Load JS ┌ ● / 7.41 kB …
Dev-Siri
  • 592
  • 5
  • 22
0
votes
0 answers

How to upload icon to GraphCms / GraphQl from react-icon and then render to nextJS?

I want to have the option to upload icon to graphcms and then use the icon in Next.js. I tried to add the "Multi line text" function in graphcms and inside provide the name of the icon like this "AiFillHome". However unfortunately it looks like…
koren sabag
  • 3
  • 1
0
votes
0 answers

How to add SVG from Fontawesome react code snippet in React app?

I am using CSS module. Does it affect in how to add the Font awesome icon? I already installed all the required dependencies. nav.js import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classes from…
rlopxhan21
  • 51
  • 4
0
votes
3 answers

React: How to display react-icons element using fetch API?

I stored my social links data on firebase, and now I want to make a
  • list of my social links but the icon object I have here, is not showing me the icons instead it's showing me the elements like: . It should be displayed as icon,…
    • Mohit
    • 135
    • 10
    0
    votes
    0 answers

    How to display a specific icon based on the data from a JSON file ? on Reactjs

    I want to display an Icon regarding on what key inside a JSON file. Example.. JSON file=====>[{ "name": "Evan Feliza", "intro":"Occaecat esse dolor dolor ea eiusmod nulla.", "cvfile":"asdsd/asdsad/asdasd//sad", "about": "Id eu id in ad aute…
    Evan Feliza
    • 19
    • 4
    0
    votes
    0 answers

    Two output files share the same path but have different contents with react-icons

    This error is happening to me when importing icons from react-icons. attached image of the error and code. check all the places where I import react-icons and in all the names and imports they are correct. I also commented the imports and where I…
    RyanCF
    • 11
    • 3
    0
    votes
    1 answer

    How to align button on right, with all text on one line?

    I am trying to align my button (JSX component) on the right-hand side, and have all the text on one line. I am using next.js and tailwindcss, and the button contains plain text and a react-icon. All of these components are contained within a…
    noobprogrammer
    • 3
    • 2
    0
    votes
    2 answers

    I am trying to add icons in my react app but this method not working Need help and guidance

    package.json file { "name": "myapp", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { …
    user17862559
    0
    votes
    1 answer

    Why is my react app displaying a blank screen after importing and using an icon from material ui despite compiling successfully in my console?

    This is the code and it runs fine up until I added the "Avatar" line. I had to use react icons instead of material UI because it wasn't displaying. I would also appreciate an alternative package I can install that would allow me to use the Avatar…
    Joseph Olutide
    • 11
    • 2
    0
    votes
    1 answer

    Error: Mapping an object with an integrated react-icon

    I've got an object that I'm trying to map over. I keep getting this error: SyntaxError: Unexpected token '<' (at navigation.js?t=1663213543000:18:11). It's referring to the icon. It should work though... React-Icons "^4.4.0" is installed. Here's a…
    Michael Martell
    • 141
    • 2
    • 16
    0
    votes
    1 answer

    React icons: Which import should I use?

    I'm a bit confused. In my web project, I'm using React and for iconography, I'm using the React Icons library. The thing that confuses me is: Every time I want to use an icon, the IDE (in my case JetBrains WebStorm) suggests two available import…
    gru
    • 2,319
    • 6
    • 24
    • 39
    0
    votes
    1 answer

    How to use imported type in React/Typescript

    import { IoLogOutOutline } from 'react-icons/io5'; import { IconType } from 'react-icons'; How do I use the imported type 'Icon Type' ? (alias) type IconType = (props: IconBaseProps) => JSX.Element I am able to pass an icon as a prop when…
    Christian Webb
    • 297
    • 1
    • 6
    • 14
    0
    votes
    2 answers

    Why are my react icons not functioning properly?

    attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error.…
    Hudson
    • 11
    • 3
    0
    votes
    0 answers

    How to import whole `react-icons` pack in a single line import

    We need to import different icon packs from react-icons by different import line. e.g: import {FaUser} from 'react-icons/fa But in my case I'm taking the icon names from json file and trying to destucture and show them in my component. Icons can be…
    Rayhan Mahi
    • 11
    • 2
    0
    votes
    1 answer

    React dynamic Icon usage

    I have a list of objects, for them i have imported react icons as alias of list names separately, but when providing as list name in icon place, icon is not rendering For Example : import { BiSearchAlt2,BiCurrentLocation,BiBlanket as Blanket,…
    talatam sri manikanta
    • 9
    • 2
    1 2 3
    …
    9 10