React Icon is declared but its value is never read .ts(6133)

Question

Here is my code:

import React from 'react'
import {BsLinkedin} from 'react-icons/bs'

    const HeaderSocials = () => {
      return (
        <div className='header_socials'>
            <a href="https://www.linkedin.com">BsLinkedin</a>
        </div>
      )
    }

I first ran npm install react-icons --save, however when I import BsLinkedin from react-icons/bs and try to call for it, I get the error React Icon is declared but its value is never read .ts(6133). Although I can still start my local host, the text "BsLinkedin" is displayed instead of the actual icon I want.

Answer 1

What you are importing is an React component, so it can be displayed just like how you'd render a component like <BsLinkedin />

Therefore, you can get it to work properly by

import React from 'react'
import { BsLinkedin } from 'react-icons/bs'

const HeaderSocials = () => {
  return (
    <div className="header_socials">
      <a href="https://www.linkedin.com">
        <BsLinkedin />
      </a>
    </div>
  )
}

See the official documentation intro section of documentation here -- https://react-icons.github.io/react-icons