Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

xlink:href attribute on <use> tag throws typescript error when used in tsx file

I have simple code that includes svg icon with <use> tag into web-component created with stencjiljs (tsx syntax). However, when I add xlink:href attribute to <use> tag I get error Identifier expected.

Example code: 
import { Component, Prop } from '@stencil/core';

@Component({
   tag: 'example-component',
   styleUrl: 'example-component.scss',
})

 export class ExampleComponent {
     render() {
        return (
            <svg>
                <use href="#iconid" xlink:href="#iconid"/>
            </svg>
       );
    }
}

I tired to search for tsx/jsx specific solution but all I got is that it's xLinkHref in React, which doesn't work in this case.

I there specific way to do this?

like image 396
pennyroyal Avatar asked Apr 18 '18 06:04

pennyroyal


2 Answers

This one works fine for me. My component extension is .tsx

<use href="#iconid" xlinkHref="#iconid"/></use>

May be because you have missed the closing tag.

like image 154
Gautam Avatar answered Nov 15 '22 05:11

Gautam


Looks like Typescript will not support namespaced attributes: https://github.com/Microsoft/TypeScript/issues/7411

I would propose to just skip JSX and use raw JSX component factory. In React one would use React.createElement like this:

<use>
    {React.createElement('use', {href:"#iconid", "xlink:href": "#iconid"})}
</use>

In don't know how the stenciljs factory is named, but if it's compatible with JSX its createElement must have API very similar to one shown above.

(edit: s/createComponent/createElement/g)

like image 26
Zbigniew Zagórski Avatar answered Nov 15 '22 05:11

Zbigniew Zagórski