Parcel: 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:

• https://github.com/parcel-bundler/parcel/issues/1523
• https://github.com/parcel-bundler/parcel/issues/1103
• https://github.com/parcel-bundler/parcel/issues/1123
• https://github.com/posthtml/htmlnano/issues/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,
}