I am running into trouble trying to achieve a simple task: with an icon imported into a Svelte component using Vite’s asset import, how can I change the color of the icon?

<script>
  // This would be the usual Vite way to import the asset
  import icon from "../assets/icon.svg";
  // Our dynamic color
  export let iconColor = "#c0ffee";
</script>

From reading this question, several options seem to be available:

• CSS filters, which I don’t want to use, as they are too heavy performance-wise, both when it comes to rendering, and computing values for the filter (i.e. given a hex color, getting the filter values is a whole lot of JS).
• Using CSS mask property. The mask needs to be a URL of an svg, so seems like it cannot work with an asset import.
• A nice and straightforward approach: putting fill="currentColor" in the icon’s source, and styling it using the CSS color property. This doesn’t work, for a slightly complex reason:

Since the icon is an import, meant to be used with <img src={icon}/>, and not directly an <svg> element, the contents would need to inlined. This could be done like this:

<script>
  import icon from "../assets/icon.svg?raw";
</script>

<div> {@html icon} </div>

The resulting compiled page is indeed the SVG nested inside a div. But now there is no way to style it: adding an svg {} CSS selector would be considered “unused”. Svelte has no way of knowing what’s inside the raw HTML string we imported, so it tree shakes that selector away. Furthermore, due to this, we couldn’t apply any other styling to the icon, so basic things like setting the icon size are not possible either.

Using :global on the style as suggested in this question doesn’t help either: since a dynamic color per-icon is needed, each new instance of this component would recolor all icons in the page.

Maybe I’m overthinking this, and a simple solution exists that fullfils the criteria “have an SVG asset import”, and “dynamically change its color and size”. Would appreciate any help.