Seeking assistance with a seemingly simple question that can help enhance my understanding as I dive into using vue/vuetify for a new front end project. I am starting fresh and utilizing v-app-bar.
Below is a snippet from my app.vue file:
<template>
<v-app>
<v-app-bar :elevation="2">
<!-- Trying to add padding around all sides of the SVG -->
<v-img src="~/assets/test.svg" position="left" class="ma-2"></v-img>
<template v-slot:append>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</template>
</v-app-bar>
</v-app>
</template>
I am attempting to use an SVG as the logo in the navbar header instead of text, following vuetify examples. Everything works well so far, except for the challenge of adding top and bottom margins around the image. The class="ma-2" attribute adds left and right margins, but not top and bottom. Even experimenting with padding did not solve the issue.
I suspect I am overlooking something obvious as a newcomer to vue/vuetify. Is there a more effective way to insert the logo image into the navbar?