Support for xlink-href

[rbiggs]

Seems like you've added support for SVG 1 xlink:href. Nice since Safari on Mac and iOS only supports SVG 1. Works fine with h, you just have to escape the property with "", 👍. However, namespaced properties aren't allowed in JSX, so this doesn't work with it. In the P/React ecosystem they use a special attribute xlinkHref that gets converted to xlink:href, avoiding the problem.

You'd need to do something like this in the updateProperty function:

if (name = 'xlinkHref') name = 'xlink:href'
var ns = isSvg && name !== (name = name.replace(/^xlink:?/, ""))

You would use it like this:

<svg class='svg-icon'>
  <use xlinkHref="#svg--twitter" href="@svg--twitter" />
</svg>

The SVG would be in the HTML like this:

<svg style='display: none;' class="svg--source" width="0" height="0" aria-hidden="true">
  <symbol id="svg--twitter" viewbox="0 -7 15 30">
    <path d="M15.36 3.434c-0.542 0.241-1.124 0.402-1.735 0.476 0.624-0.374 1.103-0.966 1.328-1.67-0.583 0.346-1.23 0.598-1.917 0.733-0.551-0.587-1.336-0.954-2.205-0.954-1.668 0-3.020 1.352-3.020 3.019 0 0.237 0.026 0.467 0.078 0.688-2.51-0.126-4.735-1.328-6.224-3.155-0.261 0.446-0.41 0.965-0.41 1.518 0 1.048 0.534 1.972 1.344 2.514-0.495-0.016-0.961-0.151-1.368-0.378 0 0.013 0 0.025 0 0.038 0 1.463 1.042 2.683 2.422 2.962-0.253 0.069-0.52 0.106-0.796 0.106-0.194 0-0.383-0.018-0.568-0.054 0.384 1.2 1.5 2.073 2.821 2.097-1.034 0.81-2.335 1.293-3.75 1.293-0.244 0-0.484-0.014-0.72-0.042 1.336 0.857 2.923 1.357 4.63 1.357 5.554 0 8.592-4.602 8.592-8.593 0-0.13-0.002-0.261-0.009-0.39 0.59-0.426 1.102-0.958 1.507-1.563z"
    />
  </symbol>
</svg>

[rbiggs]

By the way, here's a Codepen with xlink:href working with h: https://codepen.io/rbiggs/pen/PaMmRo?editors=0010

[jorgebucaran]

@rbiggs Can't we avoid that?

/cc @ngryman @lukejacksonn

EDIT: Sorry different Luke who got mentioned.

[rbiggs]

Well, Preact doesn't bother supporting xlink:href at all. But Inferno and React do. SVG 2 is only supported by Chrome and Firefox. Microsoft has said they have no intention of supporting it, while Webkit has taken a wait and see approach. The reason is the spec for SVG 2 is still not finalized and apparently may never be. See full story here: https://www.reddit.com/r/linux/comments/5cuteh/is_svg_2_really_on_life_support/

[frenzzy]

@rbiggs have you tried to use throwIfNamespace: false option in babel-plugin-transform-react-jsx?

[lukejacksonn]

As much as I would love to just use SVG 2 and forget about this issue.. it always rears its head in an ugly way, making it a pain to implement icons reliably across browsers. Currently I am using the oncreate hack to add the xlink:hrefprop manually.

[jorgebucaran]

@lukejacksonn I should've explained it better. I added xlink support. It works :)

I mentioned you to get your feedback about doing something like React's xlinkHref for JSX xlink support.

https://github.com/jorgebucaran/superfine/blob/48efeb6b161ecf3b2b6c9ce6a515754b973c28b0/src/index.js#L65-L70

[lukejacksonn]

Ahh.. cool! I am yet to try that out.. sounds great 💯does react have a list of these custom properties like xlinkHref that we could just copy?

[frenzzy]

Sorry, but why not just allow to use namespace in jsx in your project, why need to support special camelCased names for attributes?

---

Btw, I implemented hyperapp-tools/webpack-svg-loader which uses .svg files as they are and converts them into hyperapp jsx components under the hood. It allows you to view svg using native OS or IDE preview tool and modify the graphics in any visual editor at any moment of time without the need to touch svg code manually after it.

[jorgebucaran]

@frenzzy Totally. I am definitely not excited about xlinkHref.

Why not just allow to use namespace in jsx in your project

Is it as simple as throwIfNamespace: false? If so, we can close here.

[rbiggs]

Well, throwNamespace is only available in Babel 7.0 Beta 53, which has been at stuck at that version for many months. I wouldn't expect users to have to use a Beta in production for a feature. That said, I guess we can just wait it out. Hopefully Babel 7 will ship sooner than later.

[jorgebucaran]

🎉

[rbiggs]

You might want to mention xlink support with and without throwNamespace so that it's clear to noobs.

[jorgebucaran]

@rbiggs Haha, I just learned about throwNamespace myself. Sure, let's mention it.