Add FaIcon and FaIconButton components.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@jdbernard/vue-common",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,23 +1,14 @@
 {
   "name": "@jdbernard/vue-common",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "Extra stuff I always use when building Vue applications.",
-  "main": "dist/index.js",
+  "main": "index.js",
-  "types": "dist/index.d.ts",
+  "types": "index.d.ts",
-  "files": [
-    "/dist"
-  ],
-  "exports": {
-    ".": "./dist/index.js",
-    "injector": "./dist/injector.js",
-    "sorting": "./dist/sorting.js",
-    "state": "./dist/state.js",
-    "toast.service": "./dist/toast.service.js",
-    "util": "./dist/util.js"
-  },
   "scripts": {
-    "build": "tsc --build tsconfig.json && cp -r src/components dist/.",
+    "build": "true",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build-actual": "tsc --build tsconfig.json && cp -r src/components dist/.",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish": "npm run build-actual && cp package.json dist/. && (cd dist && npm publish)"
   },
   "repository": {
     "type": "git",

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>