48730bca05
- Introduce `AppIcon.vue`, offering improved performance over the previous `fort-awesome` dependency. This implementation reduces bundle size by 67.31KB (tested for web using `npm run build -- --mode prod`). - Migrate Font Awesome 5 icons to Font Awesome 6. This commit facilitates migration to Vue 3.0 (#230) and ensures no Vue component remains tightly bound to a specific Vue version, enhancing code portability. Font Awesome license is not included because Font Awesome revokes its right: > "Attribution is no longer required as of Font Awesome 3.0" > > Sources: > > - https://fontawesome.com/v4/license/ (archived: https://web.archive.org/web/20231003213441/https://fontawesome.com/v4/license/, https://archive.ph/Yy9j5) > - https://github.com/FortAwesome/Font-Awesome/wiki (archived: https://web.archive.org/web/20231003214646/https://github.com/FortAwesome/Font-Awesome/wiki, https://archive.ph/C6sXv) This commit removes following third-party production dependencies: - `@fortawesome/vue-fontawesome` - `@fortawesome/free-solid-svg-icons` - `@fortawesome/free-regular-svg-icons` - `@fortawesome/free-brands-svg-icons` - `@fortawesome/fontawesome-svg-core`
98 lines
1.7 KiB
Vue
98 lines
1.7 KiB
Vue
<template>
|
|
<button
|
|
class="button"
|
|
type="button"
|
|
@click="onClicked"
|
|
>
|
|
<AppIcon
|
|
class="button__icon"
|
|
:icon="iconName"
|
|
/>
|
|
<div class="button__text">{{text}}</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { IconName } from '@/presentation/components/Shared/Icon/IconName';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
AppIcon,
|
|
},
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
iconName: {
|
|
type: String as PropType<IconName>,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: [
|
|
'click',
|
|
],
|
|
setup(_, { emit }) {
|
|
function onClicked() {
|
|
emit('click');
|
|
}
|
|
|
|
return {
|
|
onClicked,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
background-color: $color-secondary;
|
|
color: $color-on-secondary;
|
|
|
|
border: none;
|
|
padding:20px;
|
|
transition-duration: 0.4s;
|
|
overflow: hidden;
|
|
box-shadow: 0 3px 9px $color-primary-darkest;
|
|
border-radius: 4px;
|
|
|
|
&__icon {
|
|
font-size: 2em;
|
|
}
|
|
|
|
@include clickable;
|
|
|
|
width: 10%;
|
|
min-width: 90px;
|
|
@include hover-or-touch {
|
|
background: $color-surface;
|
|
box-shadow: 0px 2px 10px 5px $color-secondary;
|
|
}
|
|
@include hover-or-touch('>&__text') {
|
|
display: block;
|
|
}
|
|
@include hover-or-touch('>&__icon') {
|
|
display: none;
|
|
}
|
|
&__text {
|
|
display: none;
|
|
font-family: $font-artistic;
|
|
font-size: 1.5em;
|
|
color: $color-primary;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
@include hover-or-touch {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
</style>
|