Vue: Incorrect resizing of inline SVG (Material Design icons)

[TokugawaTakesi]

Version

2.6.11

Reproduction link

https://github.com/TokugawaTakesi/Issue-IccorrectSvgResizingInVue

Steps to reproduce

See README.md of repro.

What is expected?

SVG could be resized as in static HTML

What is actually happening?

SVG path resizing is incorrect.

---

I know about "vue-material-design-icons" library, but I don't want to use it because:
1) I want to unify HTML and styles in static HTML version and VUE SPA version.
2) Resizing "vue-material-design-icons" is not elegant.
3) Although vue-material-design-icons" allows to resize, there are the problems with align.

[posva]

Hello, this is way too big for a reproduction. When reporting a bug, only include what is necessary, avoiding uncesseray things like sass, pug and typescript (unless it's a typing error) as well as extra code and project files (IntelliJ).

I tried to find the problem but there are many layers that are unrelated to Vue... I don't think this is related to Vue, but rather to the layers making a difference in the way some of the attributes are being passed to Vue

If you manage to create a boiled down reproduction, please ping me or open a new issue

[TokugawaTakesi]

@posva Hello,
I removed all unnecessary files and simplified my code as you said.
Please check the updated repro repository:
https://github.com/TokugawaTakesi/Issue-IccorrectSvgResizingInVue

[Justineo]

@TokugawaTakesi

-<svg viewbox="0 0 24 24" class="CheckmarkIcon">
+<svg viewBox="0 0 24 24" class="CheckmarkIcon">

Please note that viewBox is case sensitive.

[TokugawaTakesi]

@Justineo

It was the cause!
First, thank you for the solution.

So, although HTML attributes names in case-insensitive, inline SVG is not obeys the rules, right?

[Justineo]

Yes SVG has its own rules.

[TokugawaTakesi]

@Justineo

O'K got it.
Thank you for the investigations and sorry for the false issue.