{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/font-awesome-brand-icons-react",
  "description": "Learn how to use brand icons with Font Awesome 5 in React with these helpful instructions on @fortawesome/free-brands-svg-icons.",
  "path": "/posts/font-awesome-brand-icons-react",
  "publishedAt": "2018-10-07T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "react"
  ],
  "textContent": "Love me some Font Awesome. Absolutely wonderful. However, I came a cropper when following the instructions on using the all new Font Awesome 5 with React. The instructions for standard icons work _fine_. But if you want to use brand icons then this does not help you out much. There's 2 problems:\n\n\n\n1. Font Awesome's brand icons are not part of @fortawesome/free-solid-svg-icons package\n2. The method of icon usage illustrated (i.e. with the FontAwesomeIcon component) doesn't work. It doesn't render owt.\n\nBrand Me Up Buttercup\n\nYou want brands? Well you need the @fortawesome/free-brands-svg-icons. Obvs, right?\n\nNow usage:\n\nHere we've ditched the \"library / magic-string\" approach from the documentation for one which explicitly imports and uses the required icons. I suspect this will be good for tree-shaking as well but, hand-on-heart, I haven't rigorously tested that. I'm not sure why the approach I'm using isn't documented actually. Mysterious! I've seen no ill-effects from using it but perhaps YMMV. Proceed with caution...\n\nUpdate: It is documented!\n\nYup - information on this approach is out there; but it's less obvious than you might hope. Read all about it here. For what it's worth, the explicit import approach seems to be playing second fiddle to the library / magic-string one. I'm not too sure why. For my money, explicit imports are clearer, less prone to errors and better setup for optimisation. Go figure...\n\nFeel free to set me straight in the comments!",
  "title": "Brand New Fonting Awesomeness"
}