Add possibility to import SVGs

[SheepFromHeaven]

In the new template strings I would like to have the possibility to import SVG icons so they get rendered in the html. Please add this possibility

[jurekbarth]

You can have a look at here: https://github.com/biotope/biotope-build/tree/webpack-svg-loader and here for implementation details: https://github.com/biotope/experimental-biotope-components/tree/wip-inline-svg

Still i'm having problems using bio element to not escape my SVG stuff. Maybe we could switch to a "normal" Web Component here without any sugar to make it easier to deal with SVG's. What do you think?

[timomayer]

what do you mean by normal web component?

[jurekbarth]

We are using BioElement on top of hyperHTML Element which extends HTMLElement. We could use a normal webcomponent like so

import mySvg from './mySvg'

class Icon extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = mySVG;
  }
}

This way my svg is not sanitized. Tradeoffs are ok for me, because the icon won't have child nodes.

[timomayer]

thanks for the explanation. i agree it is ok since svg has no child nodes. Whats the reason behind? Is it an hyperHTML bug?

[jurekbarth]

Not a bug a feature. It sanitizes input by default. That's a good thing 99% of the time, but there's no way around it, at least none i'm aware of. Would be handy to have something like react's dangerouslySetInnerHTML method.

[timomayer]

can you open a ticket in hyperHTML repo with this exact usecase. for the time there is no other solution we should add the workaround for svgs to our documentation.

[jurekbarth]

@timomayer will do so 👍

[SheepFromHeaven]

@jurekbarth are you still working on that? 🙏 also have a look at #157

[jurekbarth]

@SheepFromHeaven yes :) it's basically done i would like to publish that stuff we merge https://github.com/biotope/biotope-build/pull/159

[jurekbarth]

178