Closed hmaesta closed 4 years ago
Well, The styles get eliminated, because no <svg />
tag is present in the component’s markup. Why not use <svg src=“./Icon.svg” />
?
Anyway, this is not related to the way this plugin handles styles, it should be the same for regular CSS, so I'll close this as not related. If my suggestion doesn't fix your problem, reopen this discussion in the svelte repo.
Hey Lukas. Thank you for the fast response.
Indeed this is not related to this plugin – I thought so because in another project I use Sass with Svelte and this not occurs, but I realised that the SCSS is build separately.
Anyway, just for future reference, that's how to fix it:
:global(svg) {
:global(path) {
fill: yellow;
}
}
Ps: for this particular case I ended adding fill='currentColor'
on all SVGs and adding the color to SVG parent element to avoid this kind of "official workaround" from Svelte.
This should also work, and does not pollute the global styles:
<style>
.icon :global(path) {
fill: yellow;
}
</style>
<svg class="icon" src=“./Icon.svg” />
And thanks for sharing 😀
<svg src="./Icon.svg"/>
doesn't work for me.
I am using rollup-plugin-svg-import, so I have to import the file and then {@html icon}
Are you using another importing method?
Oh, I see, you import it as a string. In most cases, I do not inline SVG icons as they're usually used in multiple components...
In this case, wrap it in a div to prevent global style pollution:
<script>
import IconClose from './Icon_Close.svg';
</script>
<style>
.icon :global(path) {
fill: yellow;
}
</style>
<div class="icon">
{@html IconClose}
</div>
I believe that's related to something trying to let the code smaller ("since the SVG is not on this file, this class shouldn't be on the CSS").