fontawesome 5 not working

Choose one: 🐛 bug report

Unable to use fontawesome 5, as described in https://www.npmjs.com/package/@fortawesome/vue-fontawesome

🎛 Configuration (.babelrc, package.json, cli command)

❯ cat .babelrc
{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

❯ cat package.json
{
  "name": "client",
  "description": "snip",
  "version": "snip",
  "author": "snip",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html",
    "clean": "rimraf .cache dist"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "parcel-bundler": "parcel-bundler/parcel#vue",
    "rimraf": "^2.6.2",
    "tslint": "^5.9.1",
    "typescript": "^2.7.1",
    "vue": "^2.5.13",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.3",
    "@fortawesome/vue-fontawesome": "^0.0.22",
    "flexboxgrid": "^6.3.1",
    "tachyons": "^4.9.1"
  }
}

🤔 Expected Behavior

Should be able to use fontawesome

😯 Current Behavior

The line

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

Throws an error

❯ yarn dev
yarn run v1.3.2
$ parcel index.html
Server running at http://localhost:1234
🚨  Cannot find module '' from '/Users/sresu/code/client/src/components'
    at /Users/sresu/code/client/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/Users/sresu/code/client/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/sresu/code/client/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/sresu/code/client/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/sresu/code/client/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/sresu/code/client/node_modules/parcel-bundler/src/Bundler.js:329:13
    at FSReqWrap.oncomplete (fs.js:152:21)

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel
Node	8.4.0
npm/Yarn	npm 5.6.0 / yarn 1.3.2
Operating System	macOS 10.12.6

[jbrodriguez]

Not working on this codebase right now, but looks ok to me. Thanks !

[JPeer264]

@jbrodriguez I don’t think that is a bug. If you put in the icon as string, then the default prefix is fas https://github.com/FortAwesome/vue-fontawesome/blob/master/src/components/FontAwesomeIcon.js#L20

Please also make sure your import is correct, you are missing an s in the end:

import { faGithub, faTwitter } from '@fortawesome/fontawesome-free-brands'

If you console.log(faGithub), you can see that the prefix is fab. So either you write following (which might be more appropriate if you add your icons in one exact point):

<font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>

or you can use the object, where all the necessary information exist right away:

import { faGithub } from '@fortawesome/fontawesome-free-brands'
 
<font-awesome-icon :icon="getIcon" />
 
function getIcon () {
  return faGithub
}

@DeMoorJasper I think this can be closed.