Svelte importing svg as compoment works weird

Question

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?

Answer 1

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;
  }