Svelte importing svg as compoment works weird-CodePudding

I've created this repl to demonstrate this issue. One SVG is just added inline and works ok, the other is imported as a component and doesn't work as intended. What's the difference? How do I get this scenario to work?

CodePudding user response：

The problem is the style scoping. Since the SVG is inside another component, the styles of the parent component do not apply, you need to use :global or work with CSS variables:

  .my-stuff-svg-container :global(svg) {
    color: white;
    height: 1rem;
    width: 1rem;
    transition: 0.25s ease;
  }

CodePudding user response：

Basically yes, you missed the styling approach. Your both SVG is working fine except,

I found that both are using same id that's why background overlapping, you can try with changing that.