error:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight is not a function

Question

**import styled from 'styled-components';
import { FaChevronRight } from 'react-icons/fa';

const ButtonSty = styled.button`

  width:128px;
  height:32px;
  border:2px solid #074EE8;
  box-sizing:border-box;
  border-radius:4px;

`

const Ancor = styled.a`

font-style:normal;
font-weight:normal;
font-size:16px;
line-height:18px;
color:#074EE8;
text-decoration:none;

`

const Icon = styled.FaChevronRight`
  width:4px;
  height:9px;
  border:2px solid  #074EE8;

`

function Button() {
  return (
    <div>
      <ButtonSty> <Ancor href="#">Saznaj vise  **<Icon />**</Ancor> </ButtonSty>
    </div>
  )
}

export default Button**

Guestion: how to style a react-icon with styled-component

When i create Icon and put in ancor the error above show I do not know how to style component with react-icon

Answer 1

The dot notation is for styling HTML elements, i.e. button, a, div, etc. The correct syntax for styling another React component is:

const Icon = styled(FaChevronRight)`
  width: 4px;
  height: 9px;
  border: 2px solid #074EE8;
`

See: Extending Styles