Search code examples
typescripterror-handlinghrefxlinktsx

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?

Solution

  • 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.