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?
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With