How to stop Parcel from removing and lowercasing svg viewBox attribute in production?

[brianzelip]

❔ Question

How to stop Parcel from removing and lowercasing svg viewBox attribute on production build?

🔦 Context

This issue relates to PostHTML, HTMLnano, SVGO, and has been reported at least via:

• SVG viewBox attribute getting stripped in HTML #1523
• 🐛Vue self-closing tags broken on build but fine on dev #1103
• Parcel lowercasing Vue attributes #1123
• Specify which SVGO plugins to use posthtml/htmlnano#53

While many of the above issues have "closed", the issue hasn't actually found a solution.

The only solution that has come close is creating a .htmlnanorc file in the project root with the following content:

{
    "minifySvg": false
}

Yet this falls short, because the resulting attribute is renamed from viewBox to viewbox which renders it useless since browsers only understand viewBox.

This has affected me in such that I am unable to load fontawesome icons in my Parcel-built project.

Here is a screenshot of the production build, with the dev tools open inspecting the ghot svg - you can see in the devtools below that the svg is in the DOM, but not rendered on the page because the attribute is mis-named viewbox:

💻 Code Sample

• Source code repo
• Source file that contains hard coded svg with viewBox attr
• Live demo

🌍 Your Environment

Software	Version(s)
Parcel	^1.8.1
Node	10.1.0
npm/Yarn	npm 6.4.1
Operating System	macos 10.12.6

[mateatslc]

The .posthtmlrc solution described here works for me without or even along with the .htmlnanorc config above. I'm on Parcel v1.10.3.

[brianzelip]

thanks @mateatslc, I upgraded Parcel and added .posthtmlrc, and it works as expected.

[bbugh]

Adding the suggested configuration option to .posthtmlrc wasn't working for me, I had to turn off htmlnano's svg minification:

// .htmlnanorc
{
  "minifySvg": false,
}