Parcel bundler cutting of SVG ID form href in <use>

Question

I've got a problem with Parcel, i was searching for any help but couldn't find one.

When i use Parcel bundler i run into problem with SVG elements

Before:

<svg class="nav__icon">
   <use href="src/img/icons.svg#icon-edit"></use>
</svg>

After:

<svg class="nav__icon">
  <use href="/icons.c4b52749.svg"></use>
</svg>

Parcel is cutting of ID after # in href URL.

I've tried using this in.htmlnanorc

{
"minifySvg": {
    "plugins": [
        { "cleanupIDs": false }
    ]
} }

But it didn't help.

Answer 1

Try to replace

<use href="src/img/icons.svg#icon-edit"></use>

with

<use href="src/img/icons.svg" data-anchor="icon-edit"></use>

and finally, change your build script to this (don't forget to replace input and output)

parcel build <Your files to build here> && sed -r -i -e 's/(href=\"([^\"]*\\.html)\"([^\"><]*)\\sdata-anchor=\"([a-zA-Z0-9\\-_]+)\")/href=\"\\2#\\4\"\\3/g' <Your output path here>/*.html

Also, svg elements should have xmlns attribute set up.
Hope it works well.

Sources:

1. Github/parcel-bundler issue #703
2. Github/parcel-bundler issue #6048

Answer 2

I faced a similar issue with SVG icons not being displayed on the index.html file. The latest version of Parcel download 2.0.0-rc.0 resolves this issue with the caveat that the "main": "index.html" entry needs to be removed from the package.json file and type attribute with the value "module" needs to be added to the script tag in index.html.