4531645b4c
These updates ensure better adherence to Vue 3 standards and improve overall code quality and readability. - Update ESLint configuration from Vue 2.x to Vue 3 rules. - Switch from "essential" to strictest "recommended" ESLint ruleset. - Adjust ESLint script to treat warnings as errors by using `--max-warnings=0` flag. This enforces stricter code quality controls provided by Vue 3 rules.
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
class="icon-container"
|
|
@click="onClicked"
|
|
>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<div class="inline-icon" v-html="svgContent" />
|
|
</div>
|
|
</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,
|
|
},
|
|
},
|
|
emits: [
|
|
'click',
|
|
],
|
|
setup(props, { emit }) {
|
|
const useSvgLoaderHook = inject('useSvgLoaderHook', useSvgLoader);
|
|
|
|
const { svgContent } = useSvgLoaderHook(() => props.icon);
|
|
|
|
function onClicked() {
|
|
emit('click');
|
|
}
|
|
|
|
return { svgContent, onClicked };
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.icon-container {
|
|
display: inline-block;
|
|
.inline-icon {
|
|
:deep(svg) { // using :deep because when v-html is used the content doesn't go through Vue's template compiler.
|
|
height: 1em;
|
|
overflow: visible;
|
|
vertical-align: -0.125em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|