How to handle SVG exported from sketch in VueJS?

Question

SVG

I'm using the system suggested by the VueJS documentation: https://vuejs.org/v2/cookbook/editable-svg-icons.html
It sets the base icon's viewbox to 0 0 100 100, and apparently this value doesn't change anymore. But when I export the icons from the sketch, different values ​​of this viewbox are possible. And it turns out that when you use an icon, the code will look like this:

<icon-base
    width="12"
    height="12"
    viewbox="0 0 40 40" <---- вот это значение будет везде разным
    icon-name="write"
  ><icon-write /></icon-base>

Accordingly, if I understand correctly, the approach should be as follows:
1. An icon system is created in the sketch, each icon has a fixed size (for example, 24x24). The viewbox for it will be equal to 0 0 24 24
2. In VueJS, in the base component, we specify this viewbox, with the ability to overwrite it
3. If the icon is not standard, for example, not square, then for such icons we prescribe our own viewbox?