[[官方文档]](https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs) Font Awesome now has an official Vue.js component that’s available for all who want to use our icons in their Vue.js projects. >[warning] If you are using Vue, you need the [vue-fontawesome](https://github.com/FortAwesome/vue-fontawesome) package or Web Fonts with CSS. The Font Awesome Vue.js component is available on npm and that’s also where we maintain its official documentation. | Useful Link | What it’s good for | | --- | --- | | [API docs](https://www.npmjs.com/package/@fortawesome/vue-fontawesome) | The official Vue.js component documentation | | [GitHub project](https://github.com/FortAwesome/vue-fontawesome) | Where to submit issues and collaborate/contribute to codebase | ## Installation ~~~ bash $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/vue-fontawesome $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/free-brands-svg-icons $ npm i --save @fortawesome/free-regular-svg-icons ~~~ ## Usage ### Recommended The following examples are based on a project configured with [vue-cli](https://github.com/vuejs/vue-cli). `src/main.js` ~~~js import Vue from 'vue' import App from './App' import { library } from '@fortawesome/fontawesome-svg-core' import { faUserSecret } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faUserSecret) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' }) ~~~ `src/App.vue` ~~~html <template> <div id="app"> <font-awesome-icon icon="user-secret" /> </div> </template> <script> export default { name: 'App' } </script> ~~~