bug: SVGs in functional components won't get rendered when imported dynamically

[phhbr]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.20.0

Current Behavior

Basic issue

When a stencil web component (icon.tsx), which is using a 'dynamic' stencil functional component (help-icon.tsx) to render a SVG, the svg gets not rendered, or not rendered properly. When adding a hidden svg additionally to the web component, the functional component SVG gets rendered properly.

Observation / current workaround

When adding an additional (hidden) svg, the SvgHelp functional component gets rendered properly. When using a 'fixed' functional component, ie always help-icon.tsx, the component also gets rendered properly

Another workaround

The tag could be located in the host web component, and the functional component brings the (or other SVG-markup.)

Additional information

According to slack (@johnjenkins), the issue could be with some build time optimizations in here

Expected Behavior

Stencil renders SVGs in functional components out of the box, even when the host web components does not include SVG.

System Info

No response

Steps to Reproduce

web component: icon.tsx

import { Component, h} from '@stencil/core';
import { Icons } from '../_functional';
@Component({
  tag: 'my-icon',
  styles: `svg { height: 24px; }`,
})
export class Icon {
  render() {
    const IconSVG = Icons['help'];
    return (
        <IconSVG />
    );
  }
}

map of functional components

import SvgHelp from "./help";

export const Icons = { help: SvgHelp }

functional component: help.tsx

import { h } from '@stencil/core';

const SvgHelp = () => {
        return (
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm1.965-12.435V9.5a1.5 1.5 0 0 0-1.5-1.5c-.654 0-1.294.417-1.5 1H9a3.5 3.5 0 0 1 6.965.5C15.965 11.263 15 13 13 13v1h-2v-.5c0-.378 0-.736.04-1.056C11.15 11.59 11.548 11 13 11c.967 0 .966-.792.965-1.435ZM13 16v2h-2v-2h2Z"
                />
            </svg>
        );
    };
    export default SvgHelp;

Code Reproduction URL

https://github.com/phhbr/stencil-component-starter-main

Additional Information

I don't know if it's a feature or a bug or just some documentation issue.

[rwaskiewicz]

Thanks @phhbr! I'm going to label this issue to get it added to the backlog!

[pranav-js]

this is there in stencil 3.0 also. I migrated from 1.5 to 3 directly and now seeing this issue. @rwaskiewicz will it be possible for you to please check this :( . SVG is there in dom but doesn't show render in UI.

I have a custom path added in tsconfig.json for assets, If I use relative paths then only it works :(. what's with custom defined paths like @myapp/assets

[ZinLiao]

i meet the same problem in stencil 3.4.0

[christian-bromann]

I started some investigations on this. It is unrelated to whether or not the component is an SVG. The problem is that Stencil doesn't handle dynamic components in general due to its build optimizations. I will bring this to the team to discuss potential solutions for this.

[christian-bromann]

Hey there 👋 I concluded my investigations and consulted with the Stencil team. This is a limitation of functional components within Stencil. We have raised a new issue and ingested this into our backlog, see #5246.

To workaround this issue there are the following options:

• make IconSVG a class component and use its template tag directly, therefor remove the need of importing the component
• as mentioned by the OP already: import the functional component directly and avoid "barrel files"