Using Free and Pro Font Awesome Icons
Some @phila/vue-comps and @phila/vue-mapping components are build to include a Font Awesome icon.
For instance, the Topic component takes an icon prop to show on the left of the Topic heading box:
Also, the VectorMarker component of @phila/vue-mapping can take an icon prop, and it will put that icon on the map:
This works because both of those libraries include the following as dependencies:
- @fortawesome/fontawesome-svg-core
- @fortawesome/free-regular-svg-icons
- @fortawesome/free-solid-svg-icons
- @fortawesome/vue-fontawesome
To use this infrastructure, you have to add the following line at the top of your main.js:
import { library } from '@fortawesome/fontawesome-svg-core';
Then you can import as many icons from Font Awesome that you want. The packages "free-regular-svg-icons" and "free-solid-svg-icons" are automatically available to you as dependencies of other packages you have imported.
import { faDotCircle } from '@fortawesome/free-regular-svg-icons/faDotCircle';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
Finally, you have to add the imported icons to the library as follows:
library.add(faDotCircle, faHome, faBook);
If you work for the City of Philadelphia, you can use the city's Pro Font Awesome account to add pro icons to your project. You have to add a pro library to your project. In ConEmu write:
yarn add @fortawesome/pro-light-svg-icons
Then in your main.js include anything from that package:
import { faAcorn } from '@fortawesome/pro-light-svg-icons/faAcorn';
Then add your icons to your library:
library.add(faAcorn);
You then have to get create a file called .npmrc, put it in the .gitignore, and include the City of Philadelphia's Font Awesome key:
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=*the City of Philadelphia Font Awesome key_*
Since your .npmrc cannot go into GitHub, Travis will not be able to get the City of Philadelphia Font Awesome key when you push to S3. You have to put the City's key into the project in Travis:
Then add this line to your travis.yml file:
before_install:
- printf "@fortawesome:registry=https://npm.fontawesome.com/\n//npm.fontawesome.com/:_authToken=${FA_AUTH_TOKEN}" >> ~/.npmrc