fortawesome/vue-fontawesome

Font Awesome Vue component

vue-fontawesome (with Vue 3)

Font Awesome Vue 3 component using SVG with JS

---

• Documentation
• How to Help
• Contributors
• Releasing this project (only project owners can do this)

Documentation

Official documentation is hosted at docs.fontawesome.com

Helpful Vue links:

• Set Up With Vue
• Add Icons with Vue
• Adding Icon Styling with Vue

How to Help

Review the following docs before diving in:

• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

And then:

• Check the existing issues and see if you can help!

Contributors

The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.

	Name	GitHub
	SirLamer	@SirLamer
	Liu Xinyu	@meteorlxy
	Xaver Schulz	@schulz3000
	Yannick Ihmels	@ihmels
	btaens	@btaens
	David Driscoll	@david-driscoll
	Tyranteon	@tyranteon
	Romain Failla	@rigma
	Vinicius Rangel	@viniciuslrangel
	Okke Tijhuis	@otijhuis
	Aaron Parker	@parkeyparker
	Brandon Mork	@brandon-mork
	Michael Cozzolino	@michaelcozzolino

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

The Font Awesome team:

	Name	GitHub
	Travis Chase	@supercodepoet
	Rob Madole	@robmadole
	Mike Wilkerson	@mlwilkerson
	Brian Talbot	@talbs
	Jason Lundien	@jasonlundien

Releasing this project (only project owners can do this)

See DEVELOPMENT.md

vue-fontawesome's Issues

How to integrate with Vue-cli & vue-router

I try all step in your tutorial in my vue-cli project (with vue router).
I put these lines in my main.js file

import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import faSpinner from '@fortawesome/fontawesome-free-solid/faSpinner'
fontawesome.library.add(brands, faSpinner)

but I cannot use in any of my child component.
error: component undefined.

// one of my child component
 components: {
    FontAwesomeIcon // this line will cause error
  }

I also try to register global components (in my main.js file), but I'm not sure how to create my own template

Vue.component('font-awesome-icon', {
	props: {
		icon
	},
	// template: `<svg><use :xlink:href="'static/icons/solid.svg#' + icon"></use></svg>`
})

I really need your help ~
Thank you!

Feedback: Unable to build vue-fontawesome due to babel error

Hello, and thanks for the work but...

When building my app using: import FontAwesomeIcon from '@fortawesome/vue-fontawesome', i got a babel error:

[!] (babel plugin) Error: Couldn't find preset "es2015" relative to directory "C:\Users\...!...\node_modules\@FortAwesome\vue-fontawesome\src"

Inside /node_modules/@fortawesome/vue-fontawesome i was unable to find the index.es.js nor any node_modules local to this package.

To fix it i needed to run npm install inside the package to get correct dependencies, then use rollup -c to build it !

Did you forget the build ?

Next, i got:

Error: It looks like your Babel configuration specifies a module transformer. Please disable it. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information

So apparently, the probleme come from that you're using deprecated stuff from babel a.k.a babel-preset-es2015

The npm warning about it during npm install --save-dev babel-preset-es2015:

npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

I use babel-preset-env.

So i change my babel conf to use es2015 and stage-3 but still got error:

It looks like your Babel configuration specifies a module transformer

Finally, i found the fix using: exclude: 'node_modules/**' in my babel config.

Best regards

Dont work with webpack UglifyJs

ERROR in static/js/vendor.f26255b01e687de9902c.js from UglifyJs
Unexpected token: name (isLastCharLower) [./~/@fortawesome/vue-fontawesome/index.js:12,0][static/js/vendor.f26255b01e687de9902c.js:15618,5]

import { faCoffee } from '@fortawesome/fontawesome-free-solid' load all icons from solid

Hello,

With
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import fontawesome from '@fortawesome/fontawesome';
import { faCoffee } from '@fortawesome/fontawesome-free-solid';
fontawesome.library.add(faCoffee);

All icons from solid render despite not importing them.

Improve documentation for getting started

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

  import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
  export default {
    components: {
      FontAwesomeIcon
    }
}

ERROR:

VM31702 index.js:476 Check not find one or more icon(s) 
{prefix: "fab", iconName: "font-awesome"}
iconName
:
"font-awesome"
prefix
:
"fab"

Explicit prefix is too explicit

Impressed with the work done!

Started migrating and the only issue is tediousness of defining explicit prefixes.
What if passing prefix as prop?

<font-awesome-icon far icon="spinner" />

seems to be a way better than

<font-awesome-icon :icon="['far', 'spinner']" />

how to use with FontAwesome 5 Pro?

I can't seem to be able to find a way to select the pro styles for the icons.

Am I missing something?

Icon inside a button or inside a search field ?

Hi

I am trying to place fa-search inside a search field and every thing I tried put the icon ouside.

Any on how to proceed ?

Tanxs

@fortawesome/fontawesome VS @fortawesome/vue-fontawesome VS vue-awesome ???

What are the differences between these three packages?
I am developing in Vue JS, but feel as though the normal fontawesome package would work as well apart from some minor conveniences?
Thanks for your explanation FortAwesome!

Title property not working.

When a title is added to a font-awesome-icon component its being rendered as title="my_title" on the svg element, which does not work, at least not in chrome.

Seems that is needs to be added as child element of the svg, as <title>my_title</title>

Using 'vue-fontawsome' disables the default FontAwesome JS

If you use vue-fontawesome then the regular FontAwesome does not work:

<font-awesome-icon :icon="['fal', 'compress-alt']" />
<i class="fas fa-arrow-down" />

Toggling between two icons

Hiya!

So I am working on a sortable table and using the sort/sort-up/sort-down icons

But try as I might, I can't get the icon components to change after the first instance. Almost like the DOM node is being rendered but not cleared when the icon should change.

in the template:

  <icon icon="sort" v-if="sort.segment !== 'completed_at'"></icon>
  <icon :icon="sortIconDirection" v-else></icon>

and I have a computed value:

    sortIconDirection() {
      return this.sort.direction === 'asc' ? 'sort-up' : 'sort-down';
    },

And I can see the computed value correctly toggling in state, but the icon doesn't switch out. I've also tried adding another icon component with a set of v-if/else-if conditions and I can't get it to quite work. (BTW, icon is just what I named the imported vue-fontawesome component as, migrating over from Justineo/vue-awesome)

I hope this makes sense! I've been up for a long time ha. If needed, I can try to build a reduced test case if you're unable to reproduce.

Thanks!

Cannot read property 'add' of undefined

I faced an issue when using vue-fontawesome on main.js, check the details:

My code:

The issue:

dont work out of the box with vue-cli webpack

conflict with @

@fortawesome/fontawesome

vue webpack cli search in 'src' because of alias in build/webpack.base.conf.js

...
alias: {
   ...
      '@': resolve('src'),
}

Problem with use global?

// app.js
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import fontawesome from '@fortawesome/fontawesome';
import solid from '@fortawesome/fontawesome-free-solid';
import regular from '@fortawesome/fontawesome-free-regular';
import brands from '@fortawesome/fontawesome-free-brands';

fontawesome.library.add(solid, regular, brands);
Vue.use(FontAwesomeIcon);
--------------
// home.vue
<font-awesome-icon :icon="['fab', 'font-awesome']"/>

[Proposal] Improved icon and prefix API

I'l like to propose two extensions of the API:

<!-- Improved String API -->
<font-awesome-icon icon="far spinner" />

<!-- Prefix API -->
<font-awesome-icon prefix="far" icon="spinner" />

I personally find the space separated classes much closer to the <i class="far fa-spinner"></i> syntax, and is just a bit cleaner than the array syntax. (Doing icon.split(" ") to generate the array shouldn't be prohibitive, I think.)

The prefix prop is just a little more in line with other vue component libraries; I figured while we're adjusting the API, why not add it?

Of course, these changes should be backwards compatible. If you guys like them, I'll totally do the merge request; should be pretty simple.

Using vue-fontawesome in Laravel without explicit imports

HI,
I'm following the manual and I'm trying go use vue-fontawesome in Laravel without explicit imports.
In my app.js I have:

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import fontawesome from '@fortawesome/fontawesome'
import faSpinner from '@fortawesome/fontawesome-free-solid/faSpinner'

fontawesome.library.add( faSpinner)

Then in my component I have:

components: {
            FontAwesomeIcon,
        },

But I'm getting error in console:

Uncaught ReferenceError: FontAwesomeIcon is not defined

If I put

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

in my component it works.

What I'm doing wrong?

Icons load incorrectly (very large) in server side when using library.add (Nuxt.js)

Icons render initially very large until finally settling down to wanted size. I'm using nuxt with server side rendering.

Fontawesome gets loaded as a plugin with nuxt.js:

import fontawesome from '@fortawesome/fontawesome'
import iconCSS from './icon-css.css'
import {
  faFrown
} from '@fortawesome/fontawesome-free-solid'

fontawesome.dom.styles(iconCSS)

fontawesome.library.add(
  faFrown
)

export default fontawesome

Am I missing something here? Is there a workaround for this behavior?

List icons with `list-item` are vertically misaligned when you change the `line-height`

Check the vertical alignment.

---

Inline OK

<p style="line-height: 2"><font-awesome-icon icon="square-full" /> MMM</p>

---

fa-ul & fa-li OK

<ul class="fa-ul" style="line-height: 2">
  <li><span class="fa-li"><font-awesome-icon icon="square-full" /></span>MMM</li>
</ul>

---

vue-fontawesome fa-ul & list-item KO

<ul class="fa-ul" style="line-height: 2">
  <li><font-awesome-icon icon="square-full" list-item />MMM</li>
</ul>

Set a prefix default

Would be great if you could globally set the prefix default for the project. The same way you add libraries:

import fontawesome from '@fortawesome/fontawesome'
fontawesome.library.add(brands, faSpinner)

Something like:

import fontawesome from '@fortawesome/fontawesome'
fontawesome.setPrefix('fal');

Stylesheet is loaded to late

I'm using a nuxt setup with server side rendering and build a plugin like this:

import Vue from "vue"
import FontAwesomeIcon from "@fortawesome/vue-fontawesome"

import fontawesome from '@fortawesome/fontawesome'
import faChevronDown from "@fortawesome/fontawesome-free-solid/faChevronDown"
import faHome from "@fortawesome/fontawesome-free-solid/faHome"
import faDiscourse from "@fortawesome/fontawesome-free-brands/faDiscourse"
import faCode from "@fortawesome/fontawesome-free-solid/faCode"
import faBook from "@fortawesome/fontawesome-free-solid/faBook"
import faGraduationCap from "@fortawesome/fontawesome-free-solid/faGraduationCap"
import faPlug from "@fortawesome/fontawesome-free-solid/faPlug"
import faDownload from "@fortawesome/fontawesome-free-solid/faDownload"
import faComments from "@fortawesome/fontawesome-free-solid/faComments"
import faBars from "@fortawesome/fontawesome-free-solid/faBars"
import faEye from "@fortawesome/fontawesome-free-solid/faEye"
import faStar from "@fortawesome/fontawesome-free-solid/faStar"
import faServer from "@fortawesome/fontawesome-free-solid/faServer"
import faComment from "@fortawesome/fontawesome-free-solid/faComment"
import faWrench from "@fortawesome/fontawesome-free-solid/faWrench"
import faMoneyBillAlt from "@fortawesome/fontawesome-free-solid/faMoneyBillAlt"
import faPuzzlePiece from "@fortawesome/fontawesome-free-solid/faPuzzlePiece"
import faGamepad from "@fortawesome/fontawesome-free-solid/faGamepad"
import faLock from "@fortawesome/fontawesome-free-solid/faLock"
import faMagic from "@fortawesome/fontawesome-free-solid/faMagic"
import faGlobe from "@fortawesome/fontawesome-free-solid/faGlobe"
import faAsterisk from "@fortawesome/fontawesome-free-solid/faAsterisk"

fontawesome.library.add(faChevronDown, faHome, faDiscourse, faCode, faBook, faGraduationCap, faPlug, faDownload,
  faComments, faBars, faEye, faStar, faServer, faComment, faWrench, faPuzzlePiece, faGamepad, faMoneyBillAlt, faLock, faMagic, faGlobe, faAsterisk);

Vue.component("fa-icon", FontAwesomeIcon);

It seems like the stylesheet of font-awesome which is injected automatically, is injected too late:

Peer dependency warning

Note: I use yarn install to reproduce this issue.

I get the following warning message:

warning " > @fortawesome/[email protected]" has unmet peer dependency "vue@^2.4.2".

But I have vue in my package.json:

"vue": "^2.5.13"

FontAwesomeIcon: Use symbol.

You can currently create a symbol, but there's no way to use that symbol through the component.

Options:

1. new component
2. add new use prop to FontAwesomeIcon
3. change how symbol works in the component

For option 3, I'm thinking that the component would prepend the symbol version of the icon to the body (if it doesn't already exist on the page), and then render the use-markup. This would make symbol usage straightforward and automatic (in the sense of markup).

FontAwesomeIcon: Use an animation prop instead of separate boolean props.

I feel that pulse and spin are mutually exclusive animation properties. It would be easier (in the sense of library coding) to use an animation property.

Having the animation property would also facilitate future additions of animation types instead of adding more boolean properties.

Now is a good time to make this change because a 1.0 release hasn't been made.

Could you provide an example of using a brand icon?

Misunderstood docs.

CSP/SRI-compliance under vue.js

Hey,

I use the vue-fontawesome-module like this:

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import { faUser, faUserPlus } from '@fortawesome/fontawesome-pro-solid'

export default {
  name: 'App',

  computed: {
    userIcon () {
      return faUser
    },
    userPlusIcon () {
      return faUserPlus
    }
  },

  components: {
    FontAwesomeIcon
  }
}

(as suggested by the documentation).

I am however, deploying a strong CSP, that enforces style-src to only be from 'self' and not of type 'inline'. My approach seems to inject the CSS into the head (inline) which is blocked by my CSP. I confirmed this ot the official fontawesome website: https://fontawesome.com/how-to-use/performance-and-security#content-security-policy

The error is: "Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' ". Either the 'unsafe-inline' keyword, a hash ('sha256-BRawPKd7hltOCz24YgrQwTT/e3nTnPX14QPC8ElDJlU='), or a nonce ('nonce-...') is required to enable inline execution."

I wonder how I'd achieve the same thing with the vue-fontawesome-module. I am using webpack, if that is relevant.

Thanks in Advance!

how to use it in vue project with Typescript ?

error just like that :
TS7016: Could not find a declaration file for module '@fortawesome/vue-fontawesome'. '/../Workspace/../node_modules/@fo
rtawesome/vue-fontawesome/index.js' implicitly has an 'any' type.

---

Having seen the issue"Added typescript definitions" in your another repo, named react-fontawesome, knew that you are hard working on typescript definitions. I felt little ashamed, too poor knowledge about typescript definitions to solve this issue .

Thank you~

Deprecate `list-item` in favor of new syntax

New way:

<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>

We should deprecate the old but still leave it functional.

Problem while using vue-fontawesome with nuxt.

Hello,
I found a problem while using vue-fontawesome with nuxt.js (SSR). The problem is that @fortawesome/fontawesome using DOM, but nuxt don't have DOM while server side rendering.

fa-lamp regular & light are identical

The new lamp icon in the Moving pack looks identical in regular and light:

Stacking Icons

Not seeing anything in the README about stacking icons. Is this doable? Can you provide an example?
Need to specify x1, x2, etc.

Icon not working with vue

Based on the user guide, same code, but not working.

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
export default {
  components: {
    FontAwesomeIcon
  }
}

<button class="btn btn-primary btn-lg btn-block">
    edit
  <font-awesome-icon icon="edit" />
<button>

Threw error in chrome console:
Check not find one or more icon(s) {prefix: "fas", iconName: "edit"} {}

neither this would work:

<button class="btn btn-primary btn-lg btn-block">
    edit
  <font-awesome-icon :icon="['fas', 'edit']" />
<button>

Any explanation ? Thanks.

Class (static and bound), style, listeners, and other data properties do not work

As the most basic example:

<font-awesome-icon class="extra-cls" :icon="['fas', 'user']" />

Does not work. The extra data properties are not being handled correctly.

how to do a half-filled star?

As star-half-o is now gone from FontAwesome 5, how can I create a half filled star? If I put two half-star from solid and regular next to each other, flip one - there is too much spacing in between them obviously.

Using fontawesome more then doubles CPU usage with webpack-dev-server

We are trying to use FA 5 pro in a project, and we're noticing that our CPU usage is more than doubling when our project imports fontawesome. It's going to (according to the MacOS activity monitor) 140%, which I think means nearly 1.5 cores total used, which is huge.

We're not using tree shaking currently, but are importing all icons. However, I have done a test with importing 1 single icon, and my CPU jumps from 50% with no icons, to 80% with just 1 icon. Has anyone else experienced this issue?

Unable to npm run dist on Windows

When trying to run the dist script, it fails on Windows.

'NODE_ENV' is not recognized as an internal or external command.

I've already prepared a PR.

Strange rendering issue

I'm not getting any errors when this happens, but after the first icon renders, nothing else will render on the page.

Here's an example of how I have everything setup. I'm using webpack in this instance.

App.js:

window.Vue = require('vue');

import fontawesome  from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import falight from '@fortawesome/fontawesome-pro-light';
import fabrands from '@fortawesome/fontawesome-free-brands';

fontawesome.library.add(falight, fabrands);

Vue.component('font-awesome-icon', FontAwesomeIcon);

const app = new Vue({
    el: '#app',
});

HTML:

<div id="app">
        Foo
        <font-awesome-icon :icon="['fal', 'clipboard']" />
        Bar
</div>

The output of this will show "Foo" and then the icon, but "Bar" is never to be seen. However, it does flash before the icon gets rendered.

Has anyone else had this issue or have any suggestions?

Icon Not Found

Hi,
I'm using this component like so:
<font-awesome-icon :icon="tab.icon" pulse />
but I'm hitting this error:
Check not find one or more icon(s) {prefix: "fas", iconName: "spinner"} {}

I assume "spinner" is a valid name, so I'm a bit confused.

In my main.js I have the following:

import fontawesome from '@fortawesome/fontawesome'
Vue.use(fontawesome)

and in an index.js, where I register all my components I have

// Library
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

  install (Vue) {
    Vue.component(FontAwesomeIcon.name, FontAwesomeIcon)
  }

I guess I'm missing something. I'm using webpack, btw.

Can provide global introduction?

There is no provision for the introduction of the overall function of the world, similar examples of the code in the component may not be eslint inspection, I suggest the use of Vue.use (FontAwesomeIcon) this way, to the overall introduction of the icon library

How would I use this with the pro license?

I am wondering how I would access the pro icons, if I am using this package?

Thanks.

Non-Vue icons disappear

I was trying to use vue-awesome to fix the issue with icons not toggling, but when I added the @fort-awesome/fontawesome lib to my .vue component all of the non-Vue icons on the page disappeared.

Documentation pro node tutorial does not work properly

Hey guys.. i don´t really know if this is happening for everyone else, but on the documentation site, the part that describes the steps to use pro version with npm may need a little change..

The documentation says that to registry token globally is like this

$ npm config set @FortAwesome:registry https://npm.fontawesome.com/token

I tried that, and is did not work.. i had to put an equals sign (=) there to work..

$ npm config set @FortAwesome:registry=https://npm.fontawesome.com/token

Dont really know if that an issue, but there it is!

Keep up the great work!

Combine power-transforms

current possibilities:

<font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
<font-awesome-icon icon="spinner" :transform="{ rotate: 42 }" />
<font-awesome-icon icon="spinner" :transform="{ rotate: 42, size: 25 }" />

desired possibility:

<font-awesome-icon icon="spinner" :transform="{ shrink: 6, left: 4, rotate: 42, size: 25 }" />
or ..
<font-awesome-icon icon="spinner" :transform="shrink-6 left-4 rotate-42 size-25" />

Global decleration not working

Hi. I'm not sure if I'm missing something or now. I'm trying to declare this globally so I can use it in all of my vue template files.

In my main.js file I have the following.

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import { faHdd } from '@forawesome/fontawesome-pro-light'

new Vue({
    computed: {
        hhd () {
            return faHdd
        }
    },
    components: { App, FontAwesomeIcon },
    router,
    store,
    template: '<App/>'
}).$mount('#app')

Tree Shaking via ES6 destructuring

hey there,

I'm trying to facilitate the documented tree shaking so I can reduce the bundle size.

The docs say

Using an explicit icon offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

Import the specific icons that you need:

import { faCoffee } from '@fortawesome/fontawesome-free-solid'

but from my tests, this still imports all of the solid icons (I'm using Pro, though).

This is my code:

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import { faLocationArrow, faUpload } from '@fortawesome/fontawesome-pro-solid';

fontawesome.library.add(faLocationArrow, faUpload);

Vue.component(FontAwesomeIcon.name, FontAwesomeIcon);

Here, I only add two icons but the bundle still has >460kb of fontawesome and all icons work.
Seems like the only way to do this is via

import faLocationArrow from '@fortawesome/fontawesome-pro-solid/faLocationArrow';

which actually does bring down the bundle size but it becomes quite cumbersome when adding 10 to 20 icons.

So am I misunderstanding something from the docs? Or how does the tree shaking work for the given example

import { faCoffee } from '@fortawesome/fontawesome-pro-solid'

How do we implement vue-fontawesome with nuxt js app?

Hi, i was wondering how do we implement vue-font-awesome with nuxt js app?

I've tried working with the following module https://github.com/vaso2/nuxt-fontawesome which has dependencies on this source code but I seem to keep getting the following error...for a nuxt js app.

Was wondering if there was something else that needs to be imported correctly to get this to work? Thanks!

Component overwrites sibling text unless wrapped in containing element

When using the vue icon component in an element with sibling text, it is removing the text on render:

Old method using the JS library (works with icon and sibling text visible):

<div>
    <i class="fas fa-bolt"></i> Some sibling text
</div>

New method using Vue component (not working with ONLY icon visible... the sibling text is removed from the dom):

<div>
    <font-awesome-icon icon="bolt" /> Some sibling text
</div>

If I wrap the component in a span, it works as intended:

<div>
    <span><font-awesome-icon icon="bolt" /></span> Some sibling text
</div>

Support all features of the SVG Framework

Would be awesome if compositions, layers, text overlays and counter badge overlays were supported by the component.

Cannot read property 'prefix' of undefined

vue.runtime.common.js:561 TypeError: Cannot read property 'prefix' of undefined
    at Object.icon (index.js:1309)
    at render (index.js:243)
    at createFunctionalComponent (vue.runtime.common.js:3519)
    at createComponent (vue.runtime.common.js:3678)
    at _createElement (vue.runtime.common.js:3857)
    at createElement (vue.runtime.common.js:3796)
    at vm._c (vue.runtime.common.js:4136)

mycomponent.vue

<template>
  <header>
    <h1>Pond</h1> <font-awesome-icon pack="fas" name="check-square" />
  </header>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

export default {
  name: 'header',
  components: {
    FontAwesomeIcon
  },
}
</script>

I at first used npm local import to be able to use the pro collection (as it's not on NPM), then tried regular installation of @fortawesome/fontawesome and free-solid.

Add a dist folder with prebuilt source

Hello,

If possible, could you please add a dist folder with everything already built? I'm using Vue and Font Awesome in our framework and just discovered the two don't play too nice together. I'd love to use this library but would prefer not to introduce (yet) another build tool.

Ideally, I would like to be able to include a "vue-fontawesome.min.js" onto pages (just like with the base Font Awesome library) that need it and then use the font-awesome-icon components from there.

If this isn't possible that's OK, thank you for your time.