search

ls-age / svelte-preprocess-sass

Svelte preprocessor for sass
91 stars 6 forks source link

Imported SVG being omitted on final CSS #101

Closed hmaesta closed 4 years ago

hmaesta commented 4 years ago 
<script>
    import IconClose from './Icon_Close.svg'; 
</script>

{@html IconClose}

<style lang="scss">
 svg {
   path {
     fill: yellow;
   }
 }
</style>

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").

LukasHechenberger commented 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” />?

LukasHechenberger commented 4 years ago

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.

hmaesta commented 4 years ago

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

(docs#style)

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.

LukasHechenberger commented 4 years ago

This should also work, and does not pollute the global styles:

<style>
  .icon :global(path) {
    fill: yellow;
  }
</style>

<svg class="icon" src=“./Icon.svg” />
LukasHechenberger commented 4 years ago

And thanks for sharing 😀

hmaesta commented 4 years ago

<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?

LukasHechenberger commented 4 years ago

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>