jdb/vue-common
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add FaIcon and FaIconButton components.

Browse Source
This commit is contained in:
Jonathan Bernard 2022-02-16 14:01:38 -06:00
parent d2bca5c401
commit ce45ce45b7
3 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

21
src/components/FaIcon.vue Normal file
View File

@ -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>

33
src/components/FaIconButton.vue Normal file
View File

@ -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>