Stencil: Can not use custom plugins for SVG

[sjoerdbeentjes]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x ] bug report
[ ] feature request
[ ] support request

Current behavior:
When attempting to import an SVG as string using for example rollup-plugin-svg, it ends up being base64 encoded instead of just being the raw SVG string as a module. It's because of the imagePlugin used in stencil.

Expected behavior:
Being able to use custom plugins which can transform SVG files.

Related code:

// stencil.config.js
import svg from 'rollup-plugin-svg'

export default {
  plugins: [
    svg()
  ]
}

// component.tsx
import sprite from './sprite.svg'

Other information:
My suggestion on how to fix this is by removing this plugin from the stencil core, since in my experience it needs to be configurable. Maybe I'm missing how to do this in the current situation, if that's the case i'm curious on how to do that.

[BennyZ28]

Anything on this? It's blocking us too

[willycamargo]

This was a blocker issue for us too.
Unfortunately we'll migrate to another tool/framework because of this issue 😟

[fabriciomendonca]

I have just released the version 1.0.0 of the stencil-inline-svg package, making it work with Stencil ^1.4.0.
It will check if the source text is a rollup imagePlugin export string, extract the base64 string, decode it and return a new export for the inline svg.

https://www.npmjs.com/package/stencil-inline-svg

[hnipps]

@manucorporat This is still an issue. While stencil-inline-svg works, it's more of a workaround. It decodes the base64 string (provided by Stencil for every SVG) back to markup.

We shouldn't have to do this because the markup is available prior to Stencil loading SVG files.

We need a way to load SVGs as HTML strings without having to decode base64 strings.