Add FaIcon and FaIconButton components.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jdbernard/vue-common",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Extra stuff I always use when building Vue applications.",
   "main": "index.js",
   "types": "index.d.ts",

src/components/FaIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <span class="fa-icon"><FontAwesomeIcon :icon="icon" :spin="spin" /> </span>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'FaIcon',
+  components: { FontAwesomeIcon },
+  props: { icon: String, spin: Boolean },
+});
+</script>
+<style scoped lang="scss">
+.fa-icon {
+  display: inline-block;
+  height: 1em;
+  text-align: center;
+  width: 1.2em;
+}
+</style>

src/components/FaIconButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <button class="fa-icon"><FontAwesomeIcon :icon="icon" :spin="spin" /></button>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'FaIcon',
+  components: { FontAwesomeIcon },
+  props: { icon: String, spin: Boolean },
+});
+</script>
+<style scoped lang="scss">
+.fa-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 1em;
+  height: 2em;
+  width: 2em;
+}
+
+.fa-icon.inline {
+  background: none;
+  margin: 0;
+
+  &:hover {
+    background: var(--color-accent-fg);
+  }
+}
+</style>