Troubles using an svg sprite

[verhulstd]

I am trying to get a svg sprite working with parcel 2.0.0-beta.3.1.

<svg class="icon icon-laptop">
     <use xlink:href="./icons/symbol-defs.svg#icon-laptop"></use>
</svg>

also tried to add both xmlns with no luck

<svg class="icon icon-laptop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <use xlink:href="./icons/symbol-defs.svg#icon-laptop"></use>
</svg>

The svg sprite gets into the dist folder: symbol-defs.8c1d7adb.svg

but the html gets transformed without the #icon-laptop
so it results in the following generated html:

<svg class="icon icon-laptop">
  <use xlink:href="/symbol-defs.8c1d7adb.svg"></use>
</svg>

so it seems like the #icon-laptop gets removed

[StevenLeonCooper]

I’m new to parcel so I can’t be of too much help but have you tried changing the path to a full URI (including http at the beginning as if you were using a CDN for the image) as a work-around?

I had to use a CDN for jQuery because parcel doesn’t bundle it correctly and the global $ object never gets defined. The build script should ignore full URLs so you could do that as a means of getting around the bad transform.

For me it’s fine as a permanent solution since using a CDN for a library script is reasonable anyway; I don’t know if it makes sense for SVG assets.

[verhulstd]

That means that I should have the svg sprite copied manualy to my dist folder? Although I think there is a copy-static-files-plugin available....

[StevenLeonCooper]

Well see that’s why it’s not a great option but it may be a necessary work-around until the problem is solved. If the SVG is static and not changing much then it probably isn’t a big deal to just manually copy it over. I don’t know if your settings are different than mine but when I build it doesn’t clear out the dist folder so it’s not like you’d have to do it every time you build.

[verhulstd]

I solved it 4 now with the following:

1. I put the svg sprite in a /static folder
2. npm i -D parcel-reporter-static-files-copy (to copy the static files to the dist)
3. setup that reporter in .parcelrc :

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

I can confirm that this works. Now it would be nice to have that absolute path 'http://localhost:1234' in a .env file. But I don't think I can use an env var in the html...

Any suggestion on this or a workaround to have that absolute url in a var somewhere?

[verhulstd]

Managed to fix it with:

    "posthtml-expressions": {
      locals: {
        HOME_URL: process.env.HOME_URL,
      },
    },

[verhulstd]

attention: If you want to use env variables in your posthtml.config.js:
you have to load them manually:
require("dotenv").config({ path: ".env." + process.env.NODE_ENV + ".local" });

so my whole file is now:

require("dotenv").config({ path: ".env." + process.env.NODE_ENV + ".local" });

module.exports = {
  plugins: {
    "posthtml-include": {
      root: "./src/includes",
    },
    "posthtml-expressions": {
      locals: {
        HOME_URL: process.env.HOME_URL,
      },
    },
  },
};