From ce45ce45b7ae69cac3da72d6f1f335bae76febfa Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jonathan@jdbernard.com>
Date: Wed, 16 Feb 2022 14:01:38 -0600
Subject: [PATCH] Add FaIcon and FaIconButton components.

---
 package.json                    |  2 +-
 src/components/FaIcon.vue       | 21 +++++++++++++++++++++
 src/components/FaIconButton.vue | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/FaIcon.vue
 create mode 100644 src/components/FaIconButton.vue

diff --git a/package.json b/package.json
index 0f9486d..f447360 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/FaIcon.vue b/src/components/FaIcon.vue
new file mode 100644
index 0000000..d66bf04
--- /dev/null
+++ b/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>
diff --git a/src/components/FaIconButton.vue b/src/components/FaIconButton.vue
new file mode 100644
index 0000000..f4fe87d
--- /dev/null
+++ b/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>