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`
41 lines
873 B
Vue
41 lines
873 B
Vue
<template>
|
|
<div v-html="svgContent" class="inline-icon" />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent,
|
|
PropType,
|
|
inject,
|
|
} from 'vue';
|
|
import { useSvgLoader } from './UseSvgLoader';
|
|
import { IconName } from './IconName';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
icon: {
|
|
type: String as PropType<IconName>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const useSvgLoaderHook = inject('useSvgLoaderHook', useSvgLoader);
|
|
const { svgContent } = useSvgLoaderHook(() => props.icon);
|
|
return { svgContent };
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.inline-icon {
|
|
display: inline-block;
|
|
::v-deep svg { // using ::v-deep because when v-html is used the content doesn't go through Vue's template compiler.
|
|
display: inline-block;
|
|
height: 1em;
|
|
overflow: visible;
|
|
vertical-align: -0.125em;
|
|
}
|
|
}
|
|
</style>
|