How to load SVG in CSS

In the docs I found https://docs.plasmo.com/framework/import So I did

.card-stats {
  background-image: url("raw:~assets/Spring.svg");
}

.card-stats {
  background-image: url("raw:~assets/Spring.svg");
}

but it resolves to

.card-stats {
  background-image: url("Spring.aa316ce4.svg");
}

.card-stats {
  background-image: url("Spring.aa316ce4.svg");
}

rather than

.card-stats {
  background-image: url("chrome-extension://ID/Spring.aa316ce4.svg");
}

.card-stats {
  background-image: url("chrome-extension://ID/Spring.aa316ce4.svg");
}

Plasmo Docs

Import Resolution – Plasmo

How imports work with the Plasmo Framework.

4 Replies

Avi•11mo ago

FYI, I need it in a content script

lab•11mo ago

this is a bit... tricky :d (esp using inside css... since that chrome ID runtime must be fetched at runtime, the compiler doesn't really know about it)... What if you try url:~ instead? Or maybe... hardcode it with a WARS :d....

Avi•6mo ago

Eventually I gave up and just injected the SVG directly and absolute positioned it Let's throw another wrench: right now I'm trying to port my SCSS to Tailwind and I cannot do

<script lang="ts">
  import pathSpring from "data-base64:~assets/icons/spring.svg";
</script>

<div class="bg-[url('{pathSpring}')]"></div>

<script lang="ts">
  import pathSpring from "data-base64:~assets/icons/spring.svg";
</script>

<div class="bg-[url('{pathSpring}')]"></div>

It seems like Tailwind's interpreter will run before Plasmo's, and as such it will try to evaluate the expression to url('{pathSpring}') and not to url('.../spring.svg') In the worst case scenario, I will simply not use Tailwind for the background image stuff

lab•6mo ago

interesting.....

Gaming

Programming

How to load SVG in CSS