A Vue.js Progressive Web Application (PWA) for Skrappi
- Node.js
- Vue CLI
git clone https://github.com/Team-Alpas/potentialapp.git
cd PotentialApp
npm install
npm run serve
NOTE: Only Solid and Brand FontAwesome icons are supported
Refer to FontAwesome for the Icons. Since we are not using FontAwesome Pro, we can't use FontAwesome's Pro Solid, Regular, Duotone, and Light icons.
You can also check out vue-fontawesome.
Let's say you want to add an icon from FontAwesome to the App called credit-card
and it is a Solid icon.
First, import the icon on the App. Use the initial fa
and write your icon's name in this form (credit-card
= faCreditCard
):
main.js
import { faCreditCard } from '@fortawesome/free-solid-svg-icons'
library.add(faCreditCard)
Then to use that icon in your component. Take note of fas
(fa-solid) here:
Component.vue
<font-awesome-icon :icon="['fas', 'credit-card']" />
If you want to add another Solid icon called calendar-alt
:
main.js
import { faCreditCard, faCalendarAlt } from '@fortawesome/free-solid-svg-icons'
library.add(faCreditCard)
library.add(faCalendarAlt)
You can apply the same thing for Brand icons. However, you will now import your icons from @fortawesome/free-brands-svg-icons
:
main.js
import { faGithub } from '@fortawesome/free-brands-svg-icons'
Then to use the icon on your component, you need to use fab
(fa-brand) instead of fas
(fa-solid) earlier:
Component.vue
<font-awesome-icon :icon="['fab', 'github']" />