Using Font Awesome with React on Codepen

JavaScript
1

Hello,

I am working on a project and made a example of trying to import a Font Awesome Icon.

https://codepen.io/michaelnicol/pen/abVvrwg

import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"

console.log(window.FontAwesome) // undefined

class Presentational extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
     <FontAwesomeIcon></FontAwesomeIcon>
    )
  }
}

ReactDOM.render(<Presentational />, document.getElementById("root"));

I have come across documentation, such as the official documentation here:

But it always includes how to use NPM install in order to access the icons. I imported on the HTML head using a script tag, and am not sure if this will make it accessible for the JS.

How many I go about doing this?

2

Check this thread

Side note, I would suggest using CodeSandbox or StackBlitz for React.

1 Like
3

I tried the following code for the fa-ban:

import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"
import { library } from "https://cdn.skypack.dev/@fortawesome/fontawesome-svg-core";
import { fab } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";
library.add(fab)

class Presentational extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
     <FontAwesomeIcon icon={["fab","twitter"]}><FontAwesomeIcon/>
     <FontAwesomeIcon icon={["fab","ban"]}><FontAwesomeIcon/>
     </div>
    )
  }
}

ReactDOM.render(<Presentational />, document.getElementById("root"));

fa-ban

Where can I find a list of all official names for the icons? using fa-twitter as twitter works, but not for others such as ban.

4

Use CodeSandbox, it would have taken no time to install and use by following the docs.

  1. Import fas from free-solid-svg-icons

import { fas } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.4";

  1. Add it (the add method takes multiple arguments).

library.add(fab, fas);

  1. Use it (the icon component does not take children <ComponentName />)

<FontAwesomeIcon icon={["fas","ban"]} />

Full code 
import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome";
import { library } from "https://cdn.skypack.dev/@fortawesome/fontawesome-svg-core";
import { fab } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";
import { fas } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.4";
library.add(fab, fas);

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <FontAwesomeIcon icon={["fab", "twitter"]} />
        <FontAwesomeIcon icon={["fas", "ban"]} />
      </div>
    );
  }
}

ReactDOM.render(<Presentational />, document.getElementById("root"));

Also, make sure you look at the docs for the version you are using. There are often (breaking) changes between major versions. BTW, I tried to use @next and @6.0.0-beta3 but both seem broken with skypack.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.