{"_id":"@apility/vue-fontawesome","_rev":"5-d60a3884627bd9aa32d13747de81ca7e","name":"@apility/vue-fontawesome","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.6":{"name":"@apility/vue-fontawesome","description":"Official Vue component for Font Awesome 5","version":"0.1.6","main":"index.js","module":"index.es.js","jsnext:main":"index.es.js","types":"index.d.ts","homepage":"https://github.com/FortAwesome/vue-fontawesome","repository":{"type":"git","url":"https://github.com/FortAwesome/vue-fontawesome.git"},"contributors":[{"name":"Travis Chase","email":"travis@fontawesome.com"},{"name":"Rob Madole","email":"rob@fontawesome.com"},{"name":"SirLamer","email":"github.com/SirLamer"},{"name":"Liu Xinyu","email":"github.com/meteorlxy"},{"name":"Xaver Schulz","email":"github.com/schulz3000"},{"name":"Yannick Ihmels","email":"github.com/ihmels"}],"license":"MIT","scripts":{"build":"rollup -c rollup.config.js","dist":"cross-env NODE_ENV=production npm run build","test":"jest","prepack":"npm run dist"},"lint-staged":{"README.md":["markdown-toc -i","git add"]},"peerDependencies":{"@apility/fontawesome-svg-core":">= 1.0.0","vue":"~2"},"devDependencies":{"@apility/fontawesome-svg-core":"^1.0.0","babel-core":"^6.26.0","babel-jest":"^23.6.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.1","babel-preset-stage-3":"^6.24.1","concurrently":"^4.1.0","cross-env":"^5.1.1","humps":"^2.0.1","husky":"^1.1.2","jest":"^23.6.0","lint-staged":"^8.1.0","markdown-toc":"^1.2.0","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-resolve":"^3.0.0","vue":"^2.4.4"},"dependencies":{},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"Copyright 2018 Fonticons, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies\nof the Software, and to permit persons to whom the Software is furnished to do\nso, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@apility/vue-fontawesome@0.1.6","dist":{"shasum":"b9f5335492cae001f5fb34e7a61765f408291c66","integrity":"sha512-h7dk7SMQC2cLbZUZABSNVfMFErC9hbddoSZyglT1RTS1v7LSlvZoEuFtsn6AA4U4YXjDFy2GDCK9o//+k2kDXA==","tarball":"https://registry.npmjs.org/@apility/vue-fontawesome/-/vue-fontawesome-0.1.6.tgz","fileCount":71,"unpackedSize":546232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSZ+dCRA9TVsSAnZWagAAHWIP/1ehkY/empKK4rKPqIQi\nN9IVE+fnowmgQHeOzvhDiVGpQZubCR+JkaUpFYb7n/0fzoflc17boQUZmuR1\njv7g2eNgxJjwlU1yy2iSh+sGHoAXLN6JMFovgUqTNv2QGcpsvn5ufCS3zwzm\nQOQkqdl25KDw1+k5czWG41/AbqLQLrZMgrxlsFhdZN7JPFtSxSa7+O34HKgS\nrWHfkcXjgs+uZrfbUIOwPrrwMK/4UVNjYPoP3GQ846Jqz81cpxiEGgP1xiWe\nUBzpoAgs+dXpOij/gEc5RhMImepq8v8BaIB3Y6jPEHpJn/9F6Kf2U5HZwQvK\nZlpqz/8r0089Mb5JhCqR8OPvvzzYRVjh04MvfI/5AtFCbkXqklB9c368BG0+\n8H+Fa+1Nnfq2dmt26yjFvEsuPKYxTPs33RRQGpMlPZDaPMuyr+xJExntTkii\nTsTbURvRqPU1M+HFXctZWGgclPrPgPm9cpW8AgzvG0iQx7MnQNARhza72kxo\n/70sFXkcAe+sd/1mylCzcEfTA4mcZfPnhTJaJli0DRr4jkIszxX9lV0npXWz\njxhgmCSwzbgYaELfxPSOg6wsnl7nO0H7CooznJf25lzQotN6EMIv0Vh/ElJh\nyDC7zJYj/ZfgpBMBNZbCb3Qh4VP0/x66AVqeOeajeGHw/Ny8MT0hJ0r/adZZ\n4Dge\r\n=dyDQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLJ3+dkmiTVIuljIMtaUj6kDnqtggwWE5wQWl7KMfTgAIgNTWvhIEtaRVPJlpFUBIoRjJj/SO/53Meo8LiwGt+nl8="}]},"maintainers":[{"name":"tommysolsen","email":"tommy@apility.no"},{"name":"cathrinevaage","email":"cathrine.vaage@gmail.com"},{"name":"olavoyen","email":"olav@apility.no"},{"name":"thomas-alrek","email":"thomas@alrek.no"},{"name":"erikdju","email":"erikdju@gmail.com"}],"_npmUser":{"name":"cathrinevaage","email":"cathrine.vaage@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-fontawesome_0.1.6_1565106076930_0.36828508587148434"},"_hasShrinkwrap":false},"0.1.7":{"name":"@apility/vue-fontawesome","description":"Official Vue component for Font Awesome 5","version":"0.1.7","main":"index.js","module":"index.es.js","jsnext:main":"index.es.js","types":"index.d.ts","homepage":"https://github.com/FortAwesome/vue-fontawesome","repository":{"type":"git","url":"https://github.com/FortAwesome/vue-fontawesome.git"},"contributors":[{"name":"Travis Chase","email":"travis@fontawesome.com"},{"name":"Rob Madole","email":"rob@fontawesome.com"},{"name":"SirLamer","email":"github.com/SirLamer"},{"name":"Liu Xinyu","email":"github.com/meteorlxy"},{"name":"Xaver Schulz","email":"github.com/schulz3000"},{"name":"Yannick Ihmels","email":"github.com/ihmels"}],"license":"MIT","scripts":{"build":"rollup -c rollup.config.js","dist":"cross-env NODE_ENV=production npm run build","test":"jest","prepack":"npm run dist"},"lint-staged":{"README.md":["markdown-toc -i","git add"]},"peerDependencies":{"@apility/fontawesome-svg-core":">= 1.0.0","vue":"~2"},"devDependencies":{"@apility/fontawesome-svg-core":"^1.0.0","babel-core":"^6.26.0","babel-jest":"^23.6.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.1","babel-preset-stage-3":"^6.24.1","concurrently":"^4.1.0","cross-env":"^5.1.1","humps":"^2.0.1","husky":"^1.1.2","jest":"^23.6.0","lint-staged":"^8.1.0","markdown-toc":"^1.2.0","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-resolve":"^3.0.0","vue":"^2.4.4"},"dependencies":{},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"Copyright 2018 Fonticons, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies\nof the Software, and to permit persons to whom the Software is furnished to do\nso, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@apility/vue-fontawesome@0.1.7","dist":{"shasum":"ad231b897c6976cb71d7b5d072407fb47cba5373","integrity":"sha512-kUVDz+ef+NG3i7m2EK5GPV7XprkB0DhNkGa6kJ9lEl/nzlCdsRiB5HTQvvvG+YIpG9dFkqdu2Y6XDtpcVZFgkw==","tarball":"https://registry.npmjs.org/@apility/vue-fontawesome/-/vue-fontawesome-0.1.7.tgz","fileCount":71,"unpackedSize":546228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSaFPCRA9TVsSAnZWagAA4LwP/0L20LQWA23mG7dyaTdW\njNPDBDb/NLNE8E9d08OUjMK4EYFVys8y7jIorzFwAUNGxMzmRILS2I7LKEHw\nycMksOkhGH4052fVj+LNcEK8Bv/WVLi0ZA7c0CuST2CQ60YEM6RdHHf7onwF\nqounp2gfL+OOE9cLkie8EL6T5Tw0w69xK/Q6Em/vZHLAazjr7j8E+vk3FJrb\n1RsxKF3tpGMVfaO6D3H6i5p8+3X4baMje3lqdpQ2m2EZgpdtS0fsAHcAqEoQ\nt6nhJPiXyPWj5rpGKK22CljLUUYgsNOA5/3L1H/BTWWMGi7j7U02yicr7esl\nbQilorB/976LO+IaOn9UQM9ojshKLeOf04hgq8z4zWF1ruNzHp+9krH5v01V\n8GkscDLGKxO3z10xivyYKoFlSKgf3+SMcE2GPH95CEWZ43UeWf+Lk329DKEb\nKRrTml5msMUKNewfFnOOBoGn3e7ASTqBSuECZ+VSQ8Gc3cVf7kiC4U/bYz3X\niMdawjjeF4vpNiov/tsLNG8Iz0aDkXLIeuFvKLs7lVrCWS3irEWnH0Y96iLd\nvOuBiHwCGajqmJ/F2uADDUXiY7eG8ETU+QpQ70iYLCaBivgzjR05Srs9rHKY\nLuRgrejCEu0pWaC2qas8NG6NFAkmNdko3MjWv0GIBWf8jRLMIewiSr/4IGvf\nKVbK\r\n=JEpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJsFNjsujQ3LHQAj8nFyupCc3cVLqANO6k5mM6VhXX3AiEA/gh0t/XiVlI9Nu/6atN+gqgKTIhCKeFSQtm9f2VqiPc="}]},"maintainers":[{"name":"cathrinevaage","email":"cathrine.vaage@gmail.com"},{"name":"erikdju","email":"erikdju@gmail.com"},{"name":"olavoyen","email":"olav@apility.no"},{"name":"thomas-alrek","email":"thomas@alrek.no"},{"name":"tommysolsen","email":"tommy@apility.no"}],"_npmUser":{"name":"cathrinevaage","email":"cathrine.vaage@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-fontawesome_0.1.7_1565106510404_0.896744807668987"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-06T15:41:16.930Z","0.1.6":"2019-08-06T15:41:17.136Z","modified":"2022-11-11T13:01:30.269Z","0.1.7":"2019-08-06T15:48:30.584Z"},"maintainers":[{"email":"joachim@apility.no","name":"joadpility"},{"email":"heine@apility.no","name":"sleskeleske"},{"email":"olav@apility.no","name":"olavoyen"},{"email":"thomas@alrek.no","name":"thomas-alrek"},{"email":"erikdju@gmail.com","name":"erikdju"},{"email":"cathrine.vaage@gmail.com","name":"cathrinevaage"},{"email":"tommy@apility.no","name":"tommysolsen"},{"email":"tom@apility.no","name":"jarjarbinks1985"}],"description":"Official Vue component for Font Awesome 5","homepage":"https://github.com/FortAwesome/vue-fontawesome","repository":{"type":"git","url":"https://github.com/FortAwesome/vue-fontawesome.git"},"contributors":[{"name":"Travis Chase","email":"travis@fontawesome.com"},{"name":"Rob Madole","email":"rob@fontawesome.com"},{"name":"SirLamer","email":"github.com/SirLamer"},{"name":"Liu Xinyu","email":"github.com/meteorlxy"},{"name":"Xaver Schulz","email":"github.com/schulz3000"},{"name":"Yannick Ihmels","email":"github.com/ihmels"}],"license":"MIT","readme":"\n \"Official\n\n\n# vue-fontawesome\n\n[![npm](https://img.shields.io/npm/v/@fortawesome/vue-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/vue-fontawesome)\n[![Travis-CI](https://img.shields.io/travis/FortAwesome/vue-fontawesome/master.svg)](https://travis-ci.org/FortAwesome/vue-fontawesome)\n\n> Font Awesome 5 Vue component using SVG with JS\n\n\n\n- [Introduction](#introduction)\n * [CodeSandbox Starter Sample 🚀](#codesandbox-starter-sample-%F0%9F%9A%80)\n * [Upgrading Font Awesome?](#upgrading-font-awesome)\n * [Get started](#get-started)\n * [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)\n * [Going from 0.0.x to 0.1.0](#going-from-00x-to-010)\n- [Installation](#installation)\n- [Add more styles or Pro icons](#add-more-styles-or-pro-icons)\n- [Usage](#usage)\n * [Recommended](#recommended)\n + [Quick warning about self-closing tags](#quick-warning-about-self-closing-tags)\n + [Processing i tags into svg using Font Awesome](#processing-i-tags-into-svg-using-font-awesome)\n * [The icon property](#the-icon-property)\n + [Shorthand that assumes a prefix of \"fas\"](#shorthand-that-assumes-a-prefix-of-fas)\n + [Explicit prefix (note the Vue bind shorthand because this uses an array)](#explicit-prefix-note-the-vue-bind-shorthand-because-this-uses-an-array)\n + [Explicit icon definition through something like a computed property](#explicit-icon-definition-through-something-like-a-computed-property)\n * [Alternative using component property](#alternative-using-component-property)\n * [Why use the concept of a library?](#why-use-the-concept-of-a-library)\n + [Import the specific icons that you need](#import-the-specific-icons-that-you-need)\n + [Import the same icon from different styles](#import-the-same-icon-from-different-styles)\n + [Import entire styles](#import-entire-styles)\n * [Tree shaking alternative](#tree-shaking-alternative)\n- [Features](#features)\n * [Register your components first](#register-your-components-first)\n * [Basic](#basic)\n * [Advanced](#advanced)\n- [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)\n * [Nuxt.js](#nuxtjs)\n * [Web Components with vue-web-component-wrapper](#web-components-with-vue-web-component-wrapper)\n- [FAQ](#faq)\n * [Why so explicit (the :icon=\"['far', 'coffee']\" syntax)?](#why-so-explicit-the-iconfar-coffee-syntax)\n + [How about a separate property for the prefix?](#how-about-a-separate-property-for-the-prefix)\n + [Bindings become boilerplate and verbose](#bindings-become-boilerplate-and-verbose)\n + [Properties can disagree with each other](#properties-can-disagree-with-each-other)\n- [How to Help](#how-to-help)\n- [Contributors](#contributors)\n- [Releasing this project](#releasing-this-project)\n\n\n\n## Introduction\n\nHey there! We're glad you're here...\n\n### CodeSandbox Starter Sample 🚀\n\nHere's a [CodeSandbox Starter Sample](https://codesandbox.io/s/github/FortAwesome/vue-fontawesome/tree/master/examples/vue-cli-webpack) on how to display Solid, Regular, and Brand icons [using the Icon Library](https://github.com/FortAwesome/vue-fontawesome#usage).\n\n### Upgrading Font Awesome?\n\nIf you've used Font Awesome in the past (version 4 or older) there are some\nthings that you should learn before you dive in.\n\n> https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4\n\n### Get started\n\nThis package is for integrating with Vue.js. If you aren't using Vue then it's\nnot going to help you. Head over to our \"Get Started\" page for some guidance.\n\n> https://fontawesome.com/how-to-use/on-the-web/setup/getting-started\n\n### Learn about our new SVG implementation\n\nThis package, under the hood, uses SVG with JS and the `@fortawesome/fontawesome-svg-core` library. This implementation differs drastically from\nthe web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.\n\n> https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core\n\n### Going from 0.0.x to 0.1.0\n\nSee [UPGRADING.md](./UPGRADING.md).\n\nYou might also be interested in the larger umbrella project [UPGRADING.md](https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md)\n\n## Installation\n\n```\n$ npm i --save @fortawesome/fontawesome-svg-core\n$ npm i --save @fortawesome/free-solid-svg-icons\n$ npm i --save @fortawesome/vue-fontawesome\n```\n\n## Add more styles or Pro icons\n\nBrands are separated into their own style and for customers upgrading from\nversion 4 to 5 we have a limited number of Regular icons available.\n\n**Visit [fontawesome.com/icons](https://fontawesome.com/icons) to search for free and Pro icons**\n\n```\n$ npm i --save @fortawesome/free-brands-svg-icons\n$ npm i --save @fortawesome/free-regular-svg-icons\n```\n\nIf you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages.\n\n```\n$ npm i --save @fortawesome/pro-solid-svg-icons\n$ npm i --save @fortawesome/pro-regular-svg-icons\n$ npm i --save @fortawesome/pro-light-svg-icons\n```\n\n**Duotone icons are currently in pre-release and are coming soon to this component.**\n\nUsing the Pro packages requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).\n\nOr with Yarn:\n\n```\n$ yarn add @fortawesome/fontawesome-svg-core\n$ yarn add @fortawesome/free-solid-svg-icons\n$ yarn add @fortawesome/vue-fontawesome\n```\n\n## Usage\n\n### Recommended\n\nThe following examples are based on a project configured with [vue-cli](https://github.com/vuejs/vue-cli).\n\n`src/main.js`\n\n```javascript\nimport Vue from 'vue'\nimport App from './App'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faUserSecret } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\n\nlibrary.add(faUserSecret)\n\nVue.component('font-awesome-icon', FontAwesomeIcon)\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n components: { App },\n template: ''\n})\n```\n\n`src/App.vue`\n\n```vue\n\n\n\n```\n\n#### Quick warning about self-closing tags\n\nIf you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags.\n\nSee [this issue on the Vue.js project](https://github.com/vuejs/vue/issues/1036)\n\nIf you are writing these types of templates make sure and use valid HTML syntax:\n\n```html\n\n```\n\n#### Processing i tags into svg using Font Awesome\n\nA basic installation of [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js) has\nthe ability to automatically transform `` into\n`...` icons. This technology works with the browser's\nDOM, [`requestAnimationFrame`][raf], and [`MutationObserver`][mo].\n\nWhen using the `@fortawesome/fontawesome-svg-core` package this **behavior is\ndisabled by default**. This project uses that package so you will have to\nexplicitly enable it like this:\n\n```javascript\nimport { dom } from '@fortawesome/fontawesome-svg-core'\n\ndom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver\n```\n\n[raf]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\n[mo]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\n\n### The icon property\n\nThe `icon` property of the `FontAwesomeIcon` component can be used in the following way:\n\n#### Shorthand that assumes a prefix of \"fas\"\n\n```javascript\n\n\n\n # Same as above\n # Same as above\n```\n\nFor the above to work you must add the `spinner` and `align-left` icon to the library.\n\n```javascript\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(faSpinner, faAlignLeft)\n```\n\nIn the event that you are using an icon with a multi-word name please note that\nyou would need to pass in the icon name using _kebab-case_ as opposed to _camelCase_.\n\n```javascript\n # import { faAddressCard } from '@fortawesome/free-solid-svg-icons'\n```\n\n#### Explicit prefix (note the Vue bind shorthand because this uses an array)\n\n```javascript\n\n```\n\nFor the above to work you must add the regular `spinner` icon (Pro only) to the library.\n\n```javascript\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faSpinner } from '@fortawesome/pro-regular-svg-icons'\n\nlibrary.add(faSpinner)\n```\n\n#### Explicit icon definition through something like a computed property\n\n```javascript\n\n\n\n```\n\n### Alternative using component property\n\nWith Vue you can tell your component to resolve other component explicitly.\n\n```javascript\n\n\n\n```\n\n### Why use the concept of a library?\n\nExplicitly selecting icons offer the advantage of only bundling the icons that you\nuse in your final bundled file. This allows us to subset Font Awesome's\nthousands of icons to just the small number that are normally used.\n\n#### Import the specific icons that you need\n\n```javascript\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faCoffee } from '@fortawesome/free-solid-svg-icons'\nimport { faSpinner } from '@fortawesome/pro-light-svg-icons'\n\nlibrary.add(faCoffee, faSpinner)\n```\n\n#### Import the same icon from different styles\n\n```javascript\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'\nimport { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'\nimport { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'\n\nlibrary.add(fasCoffee, farCoffee, falCoffee)\n```\n\n#### Import entire styles\n\n```javascript\nimport { fab } from '@fortawesome/free-brands-svg-icons'\n\nlibrary.add(fab)\n```\n\nThis will add the _entire brands style to your library_. Be careful with this\napproach as it may be convenient in the beginning but your bundle size will be\nlarge. We **highly** recommend that you take advantage of subsetting through tree shaking.\n\n### Tree shaking alternative\n\nKeeping the bundles small when using `import { faCoffee }` relies on\n[tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).\nIf you are not using a tool that supports tree shaking **you may end up bundling more\nicons than you intend**. Here are some alternative import syntaxes:\n\n```javascript\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'\nimport { faSpinner } from '@fortawesome/pro-light-svg-icons/faSpinner'\n\nlibrary.add(faCoffee, faSpinner)\n```\n\nHow does this work? We have individual icon files like\n`node_modules/@fortawesome/free-solid-svg-icons/faCoffee.js` that contain just\nthat specific icon.\n\n## Features\n\nThe following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.\n\n### Register your components first\n\nTo use the following examples you must first register your component so Vue is aware of it.\n\nA good place to do this is in `main.js` or in the module you are calling `new\nVue()`. **Make sure you register the component** and **have added icons to your\nlibrary** before you bootstrap your Vue application.\n\n```\nimport Vue from 'vue'\nimport { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'\n\nVue.component('font-awesome-icon', FontAwesomeIcon)\nVue.component('font-awesome-layers', FontAwesomeLayers)\nVue.component('font-awesome-layers-text', FontAwesomeLayersText)\n```\n\n### Basic\n\n[Size](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons):\n\n```html\n\n\n\n```\n\n[Fixed width](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons):\n\n```html\n\n```\n\n[Rotate](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons):\n\n```html\n\n\n\n```\n\nFlip horizontally, vertically, or both:\n\n```html\n\n\n\n```\n\nSpin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons):\n\n```html\n\n\n```\n\n[Border](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):\n\n```html\n\n```\n\n[Pull left or right](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):\n\n```html\n\n\n```\n\n### Advanced\n\n[Power Transforms]((https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)):\n\n```html\n\n\n```\n\n[Masking](https://fontawesome.com/how-to-use/on-the-web/styling/masking):\n\n```html\n\n```\n\n[Symbols](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols):\n\n```html\n\n\n```\n\n[Layers](https://fontawesome.com/how-to-use/on-the-web/styling/layering):\n\n```html\n\n \n \n\n```\n\n[Layers text](https://fontawesome.com/how-to-use/on-the-web/styling/layering):\n\n```html\n\n \n \n\n```\n\n## Integrating with other tools and frameworks\n\n### Nuxt.js\n\nInstall `@fortawesome/vue-fontawesome` and `@fortawesome/fontawesome-svg-core` and any icon packages.\n\n```\nnpm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons\n```\n\nInside your Nuxt.js project add a `plugins/fontawesome.js` file.\n\n```javascript\nimport Vue from 'vue'\nimport { library, config } from '@fortawesome/fontawesome-svg-core'\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\nimport { fas } from '@fortawesome/free-solid-svg-icons'\n\n// This is important, we are going to let Nuxt.js worry about the CSS\nconfig.autoAddCss = false\n\n// You can add your icons directly in this plugin. See other examples for how you\n// can add other styles or just individual icons.\nlibrary.add(fas)\n\n// Register the component globally\nVue.component('font-awesome-icon', FontAwesomeIcon)\n```\n\nModify `nuxt.config.js` adding to the `css` and `plugins` sections.\n\n```javascript\ncss: [\n '@fortawesome/fontawesome-svg-core/styles.css'\n]\n```\n\n```javascript\nplugins: [\n '~/plugins/fontawesome.js'\n]\n```\n\n### Web Components with vue-web-component-wrapper\n\nThe Vue [project provides a wrapper](https://github.com/vuejs/vue-web-component-wrapper)\nthat will register your Vue components as [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).\n\nThis project and all Font Awesome SVG icons will work just fine in these\ncomponents but we need to take an additional step to add the CSS correctly.\n\nTo take advantage of encapsulation that the Shadow DOM provides and to keep\nother areas of the DOM clean we need to add the Font Awesome CSS to the root of\nthe Shadow DOM.\n\nHere is an example that leverages the `mounted()` lifecycle hook to insert the CSS.\n\n```javascript\n\n```\n\n## FAQ\n\n### Why so explicit (the :icon=\"['far', 'coffee']\" syntax)?\n\nIt's been brought up a few times that the array syntax used for specifying an\nicon from the library is a bit cumbersome. Initially, this does seem to\nbe the case but we do have good reasons.\n\n#### How about a separate property for the prefix?\n\n```html\n\n```\n\nor\n\n```html\n\n```\n\nThe problem with this is that it does not provide a consistent or concise way to specify the mask.\n\n```html\n\n```\n\nDoes the `far` apply to the icon or the mask? What is the prefix for the property it does not apply to?\n\nWhereas this is consistent and concise:\n\n```html\n\n```\n\n#### Bindings become boilerplate and verbose\n\nSince icons are not always static but can change based on Vue component\n`methods` or `computed` values we have to take that into consideration.\n\nIcon properties end up being more verbose:\n\n```html\n\n```\n\nvs.\n\n```html\n\n```\n\nOr if you are using a `prefix` property it smells of needless boilerplate:\n\n```html\n\n\n\n```\n\nvs.\n\n```html\n\n\n\n```\n\n#### Properties can disagree with each other\n\nIf we allow prefix definition through a property and we also allow an icon to\nbe specified as an object through direct import these two have a chance to\nargue with eachother. This could lead to some head-scratching when an icon\ndoesn't appear in the expected style.\n\nIn the following case which style should be used (light from the icon definition or regular from the far boolean):\n\n```html\nimport { faSpinner } from `@fortawesome/pro-light-svg-icons`\n\n\n\n\n```\n\n## How to Help\n\nReview the following docs before diving in:\n\n* [CONTRIBUTING.md](CONTRIBUTING.md)\n* [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)\n\nAnd then:\n\n1. Check the existing issue and see if you can help!\n\n## Contributors\n\nThe following contributors have either hepled to start this project, have contributed\ncode, are actively maintaining it (including documentation), or in other ways\nbeing awesome contributors to this project. **We'd like to take a moment to recognize them.**\n\n| | Name | GitHub |\n| :--------------------------------------------------------: | -------------- | -------------------------------------------------- |\n| | SirLamer | [@SirLamer](https://github.com/SirLamer) |\n| | Liu Xinyu | [@meteorlxy](https://github.com/meteorlxy) |\n| | Xaver Schulz | [@schulz3000](https://github.com/schulz3000) |\n| | Yannick Ihmels | [@ihmels](https://github.com/ihmels) |\n\nIf we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.\n\nThe Font Awesome team:\n\n| | Name | GitHub |\n| :--------------------------------------------------------: | -------------- | -------------------------------------------------- |\n| | Travis Chase | [@supercodepoet](https://github.com/supercodepoet) |\n| | Rob Madole | [@robmadole](https://github.com/robmadole) |\n| | Mike Wilkerson | [@mlwilkerson](https://github.com/mlwilkerson) |\n| | Brian Talbot | [@talbs](https://github.com/talbs) |\n\n## Releasing this project\n\nSee [DEVELOPMENT.md](DEVELOPMENT.md#release)\n","readmeFilename":"README.md"}