Make sizing the icons work

[jstgermain]

It would be very useful to have sizing props that actually worked. In the code, there is width, height, and viewBox.

export default {
  name: 'mdi-${name}',
  props: {
    width: {
      type: [Number, String],
      default: 24
    },
    height: {
      type: [Number, String],
      default: 24
    },
    viewBox: {
      type: [String],
      default: '0 0 24 24'
    },
    xmlns: {
      type: String,
      default: 'xmlns="http://www.w3.org/2000/svg"'
    }
  }
}

however, setting these does now work as expected...

<map-marker
  class="text-blue-grey"
  :width="19"
  :height="19"
  :view-box="`0 0 19 19`"
></map-marker> {{ mover.city }}, {{ mover.state }}

Instead of changing the size, it just cuts off the icon.

When I inspect the code, and change the view-box to viewBox, the icon then changes to the width and height that I want it to be. Something is wrong with the props.

[therufa]

Hi @jstgermain, thanks for sending your remarks. I'll look into this issue.

[jstgermain]

@therufa from what I can see, the issue is in the JS files. I am specifically calling the map-marker icon.

        attrs: {
          width: _vm.width,
          height: _vm.height,
          "view-box": _vm.viewBox,
          xmlns: _vm.xmlns
        }

if it is changed to the code below, it works

        attrs: {
          width: _vm.width,
          height: _vm.height,
          viewBox: _vm.viewBox,
          xmlns: _vm.xmlns
        }

[jstgermain]

@therufa it might actually even be something that is being built and may not be fixable on your end.

[therufa]

@jstgermain it turns out, there was a "typo" all along in the code which you mentioned. It is now fixed thanks to @DDeBruler. It should work now after a package update.

[therufa]

@jstgermain I just realized that I forgot to mention; it's not required to set the viewBox of the icons in order to resize them. it's enough if you reduce the height and/or width of them.

[jstgermain]

@therufa correct, it shouldn't need viewBox set. I don't know if there is something on your end that can fix it, or if it is something that is actually to do with MDI itself. There is a setting in the JS files for the icons that is "view-box..." That is what seems to be making the size not work.