diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-28 12:57:20 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-28 12:57:20 +1100 |
| commit | bcf60b4e1aa2283821010715b33009d8f4a48207 (patch) | |
| tree | 46630455ae407f30758c5b255f5fe41ccfe00a5a /src/components/TileImg.vue | |
| parent | 10ccee584417d51afc583484b692a8d7086a0d5f (diff) | |
Convert SVG icons into icon components
Diffstat (limited to 'src/components/TileImg.vue')
| -rw-r--r-- | src/components/TileImg.vue | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue index ebd350d..3de0fa8 100644 --- a/src/components/TileImg.vue +++ b/src/components/TileImg.vue @@ -1,5 +1,6 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; +import InfoIcon from './icon/InfoIcon.vue'; import {LayoutNode} from '../layout'; export default defineComponent({ @@ -88,6 +89,7 @@ export default defineComponent({ this.$emit('info-icon-clicked', this.layoutNode); }, }, + components: {InfoIcon, }, emits: ['info-icon-clicked'], }); </script> @@ -96,10 +98,8 @@ export default defineComponent({ <div :style="styles" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" :class="isExpandable ? ['hover:cursor-pointer'] : []"> <h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1> - <svg :style="infoIconStyles" class="hover:cursor-pointer" + <info-icon :style="infoIconStyles" class="hover:cursor-pointer" @mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave" - @click.stop="onInfoClick" @mousedown.stop @mouseup.stop> - <use href="#svg-info"/> - </svg> + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop/> </div> </template> |