How do I get a Vuetify component's SASS variables?

Question

I'm trying to fit an image into Vuetify's VBtn component, like this-

<template>
  <v-btn>
    <img class="img-in-btn" src="@/assets/my-image.png">
  </v-btn>
</template>

If I use the v-img and do it like-

<v-img :src="my-img" height="100%" width="100%" />

It still results in a very wide button and a huge image.

My current attempt is to grab VBtn's dimensions directly from Vuetify's stylesheet, and apply it directly to image class selector like this-

<style lang="scss" scoped>
  @import '~vuetify/src/components/VBtn/_variables.scss';
  
  .img-in-btn {
    height: $btn-sizes;
    object-fit: contain;
  }
</style>

But this throws an error-

SassError: ("x-small": 20, "small": 28, "default": 36, "large": 44, "x-large": 52) isn't a valid CSS value.

What's the proper way of doing this?

Answer 1

As mentioned in the documentation, $btn-sizes is configured using the map-deep-merge, like this-

map-deep-merge(
  (
    'x-small': 20,
    'small': 28,
    'default': 36,
    'large': 44,
    'x-large': 52
  ),
  $btn-sizes
);

It means $btn-sizes has multiple mapped values that can not be assigned directly to any CSS property and this is why you are getting the error.

Now, to get the default key's value use, map-get function like this-

map-get($btn-sizes, "default")

Here is the complete example-

<style lang="scss" scoped>
@import "~vuetify/src/components/VBtn/_variables.scss";

.img-in-btn {
  height: map-get($btn-sizes, "default") + px !important;
}
</style>