Cweili / svelte-fa

Tiny FontAwesome component for Svelte

Home Page:https://cweili.github.io/svelte-fa/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

add styling via class

evgenyfadeev opened this issue · comments

Maybe it's just me, but I'm unable to do this (an any other styling via "class" or "svg" selector... Is this a bug?

(My setup is with routify).

<style>
   .some-class {
       position: absolute;
       right: 0;
  }
</style>
<Fa class="some-class" icon={faFlag} />

Try apply your style globally with :global() like this:

:global(.some-class) {
     position: absolute;
     right: 0;
}

Here is the issue.

Try apply your style globally with :global() like this:

:global(.some-class) {
     position: absolute;
     right: 0;
}

Here is the issue.

this trick works thank you very much

commented

Question related to this topic regarding the usage of BEM.

Is there another solution to this?

<div class="block">
  <Fa icon={someIcon} class="block__element" />
</div>

Doesn't work:

.block {
  position: relative;
  
  &__element {
    position: absolute;
    right: 0;

    &--modifier {
      right: 10%;
    }
  }
}

Only Solution(?):

.block {
  position: relative;
}

:global(.block__element) {
  position: absolute;
  right: 0;
}

:global(.block__element--modifier) {
  right: 10%;
}