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`
60 lines
999 B
Vue
60 lines
999 B
Vue
<template>
|
|
<a
|
|
class="button"
|
|
target="_blank"
|
|
v-bind:class="{ 'button-on': isOn }"
|
|
v-on:click.stop
|
|
v-on:click="toggle()"
|
|
>
|
|
<AppIcon icon="circle-info" />
|
|
</a>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
AppIcon,
|
|
},
|
|
emits: [
|
|
'show',
|
|
'hide',
|
|
],
|
|
setup(_, { emit }) {
|
|
const isOn = ref(false);
|
|
|
|
function toggle() {
|
|
isOn.value = !isOn.value;
|
|
if (isOn.value) {
|
|
emit('show');
|
|
} else {
|
|
emit('hide');
|
|
}
|
|
}
|
|
|
|
return {
|
|
isOn,
|
|
toggle,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.button {
|
|
@include clickable;
|
|
vertical-align: middle;
|
|
color: $color-primary;
|
|
@include hover-or-touch {
|
|
color: $color-primary-darker;
|
|
}
|
|
&-on {
|
|
color: $color-primary-light;
|
|
}
|
|
}
|
|
</style>
|