Open samanthaming opened 4 years ago
The docs of enhanceApp.js
is here:
https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
Yes it's better to provide more examples for newcomers.
I would be happy to contribute to the docs.
But I'm struggling with adding other icons than "user secret".
For example "lightbulb" which is in the repo of fort awesome.
I'm trying to invoke it with <font-awesome-icon icon="lightbulb" />
what am i missing here?
I checked the documentation of '@fortawesome/vue-fontawesome', but many examples are not working (spinner, coffee, ...).
Okey after lots of trial and error, I finally managed to get it to work.
In the step 2 of the steps described above, in the enhanceApp.js
, you have to register every icon you wish to use (if there are better ways to do that, I'd be happy to know).
For e.g:
import { library } from '@fortawesome/fontawesome-svg-core'
import { faLightbulb, faTools, faLanguage, faGlobeEurope } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faFontAwesome, faGithub, faPython } from '@fortawesome/free-brands-svg-icons'
library.add(faLightbulb, faTools, faLanguage, faGlobeEurope, faGithub, faPython)
library.add(faFontAwesome)
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
Vue.component('font-awesome-icon', FontAwesomeIcon)
}
Allows to use:
<font-awesome-icon icon="language"/>
<font-awesome-icon :icon="['fas', 'tools']"/>
<font-awesome-icon :icon="['fas', 'lightbulb']"/>
<font-awesome-icon :icon="['fab', 'github']" /> <!-- use fab for the brand icons -->
But be aware that some styling options described here won't be available, so it won't display anything.
Hello, first of all, I'm glad I found this contribution.
Currently in my code the font-awesome-icon component is used globally, but the icon is not being rendered.
May I know what the reason is?
package.json
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3"
}
.vuepress/enhanceApp.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faUserSecret);
export default ({ Vue }) => { Vue.component("font-awesome-icon", FontAwesomeIcon); };
3. .vuepress/components/Home.vue
```vue
<template>
<div>
<font-awesome-icon icon="user-secret" />
</div>
</template>
Feature request
Just wanted to share how I was finally able to add Vue Fontawesome to VuePress. The trick is to add it to
enhanceApp.js
👍Here are the exact steps:
Now you can use it anywhere in your component 👏
This took me a while to figure it out 😅. This StackOverflow response was the gamechanger (thank you!) Maybe it's something we can include it in the docs and save folks some time 😊
What problem does this feature solve?
What does the proposed API look like?
How should this be implemented in your opinion?
Are you willing to work on this yourself?