Styled Components

General use with individual iconkit

You are able to use the styled-components's api to provide css definition to the icons.

src/components/Icon.js

import FontawesomeIcon from "@svgr-iconkit/fontawesome5";
import styled from "styled-components";

export default styled(FontawesomeIcon)`
color: black;
width: 2rem;
height: 2rem;
${({color}) => color && css`color: ${color};`}
`;

src/container/HomePage.js

import Icon from "components/Icon.js";

export default HomePage () {

  return (
    <>
      <Icon color="#ffcc000" fontSize="2rem" />
    </>
  )
}

Using with Styled System

You are able to use the styled-system's api to provide styling context to the icon.

src/components/Icon.js

import { Icon } from "@svgr-iconkit/core";
import styled from "styled-components";
import { compose, color, position, space } from "styled-system";

export default styled(Icon)`
width: 1.2rem;
height: 1.2rem;
${compose(color, position, space)}
`;

src/container/HomePage.js

import Icon from "components/Icon.js";

export default HomePage () {

  return (
    <>
      <Icon color="#ffcc000" fontSize="2rem" />
    </>
  )
}
`;