Inline svg imports

[alexreardon]

Hi there!

I am using parcel@2 and I am looking to inline some SVGs rather than just importing the path

Here is my current config:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": [
      "@parcel/transformer-typescript-tsc"
    ],
    "*.svg": [
      "@parcel/transformer-raw"
    ]
  }
}

So I'm using the transformer-raw. Ideally I would use something like transformer-string-inline but that would already base64 encode the image

[mischnic]

Does import x from "bundle-text:./logo.svg" work for you?

[alexreardon]

Is there a way to do it with transformers in the config file? I am also using storybook which uses webpack, so ideally I don’t need to any anything to the import path

[alexreardon]

(I’ll also try your suggestion tomorrow)

[alexreardon]

I thought this might work, but no success:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": [
      "@parcel/transformer-typescript-tsc"
    ],
    "*.svg": [
      "@parcel/transformer-raw"
    ]
  },
+  "optimizers": {
+    "*.svg": [
+      "@parcel/optimizer-data-url"
+    ]
  }
}

[alexreardon]

Sadly I could not get your suggestion to work

[christophz]

I have the exact same problem right now … would love to hear a solution for this.

[mischnic]

index.js:

import svg from "./swim.svg";

console.log(svg);

parcelrc:

{
	"extends": "@parcel/config-default",
	"transformers": {
		"*.svg": ["@parcel/transformer-inline-string", "..."]
	}
}

Output:

(function () {
  ...
  var $c9cd9a05029e9b75462fe50fc01e00$exports = {};
  $c9cd9a05029e9b75462fe50fc01e00$exports = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SV...></svg>";
  ...
})();

[mischnic]

Looks like the .parcelrc file wasn't recognized?

[jeffpeck10x]

Oh, good call, yes. Even if I put random characters in the .parcelrc it doesn't make a difference. Ok, I will look into why that is the case. Thanks!

[mischnic]

It needs to be in the project root (= where .git and your lockfile is)

[jeffpeck10x]

Aha, that worked.

Is there a way to put it in the package root? This is a monorepo, so I have:

.
├── .git
├── .parcelrc
├── README.md
├── packages
│   ├── packageA
│   ├── packageB

But, the .parcelrc is only applicable to packageA. Of course, this is easily worked around by specifying the path in the glob inside transformers, but it is not ideal.

Should I make a feature request for this? Or this there other workable way to apply the inline transformer to an svg asset specific to a single package in a project?

[mischnic]

Should I make a feature request for this?

If you want. (This was changed some time ago for performance reasons: #4345)

Or this there other workable way to apply the inline transformer to an svg asset specific to a single package in a project?

Nothing apart from a path in the glob.
And "asset specific to a single package" is impossible architecturally.

[CxRes]

@mischic So there is no way to statically bring in a .svg?

Convert:

<img src="1.svg" ...>

to

<img>
    <svg>
    ...

This is much more useful as it avoids the extra fetch and only inline svg can be styled by css.

[mischnic]

Not builtin, but you could use a PostHTML plugin: #1622 (comment)