Изменить цвет значка UIkit в реакции

Как я могу изменить цвет значка UIkit. Я использую реактивные компоненты. В частности, я хочу изменить цвет значка разделителя: https://getuikit.com/docs/divider

Я пробовал большую часть ответа на этот вопрос: Я изменил цвет значка Font Awesome? Ни один из них не сработал.

Я также пытался обернуть его в теги или

<i style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></i>
<div style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></div>

Я хочу изменить цвет самого значка, а не фона или другого CSS, так как их легко изменить с помощью style.

Спасибо.


reactjs frontend uikit css getuikit
person deann    schedule 13.10.2017    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Под системой значков находится svg, вставленный в тег, поэтому вы просто стилизуете svg.

.span[uk-icon=*] svg{
    color:black;
}

.span[uk-icon=*] svg path{
    fill: green;
}

Конечно, вы можете просто добавить свой собственный класс к элементу, содержащему uk-icon, чтобы быть более конкретным.

person cssBlaster21895    schedule 18.10.2017

arrow_upward
1
arrow_downward

Немного поздно, но может помочь новым здесь!

Использование формата документации uikit:

  <div class="rounded-button">
     <span uk-icon="plus"></span>
  </div>

И мой .scss:

.rounded-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  
    span{
     color: white;
    }
}
person Agus Lacuara    schedule 15.04.2021

arrow_upward
0
arrow_downward

Вот еще один пример, я использую значок звездочки:

HTML:

<span class="uk-icon" uk-icon="icon:star"></span>

Если вы проверите это, вы увидите, что оно расширяется до этого:

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="star"><polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27"></polygon></svg>

Так, например, чтобы сделать звезду с черным контуром и желтой заливкой:

.uk-icon[uk-icon="icon:star"] svg {
    color: black;
}

.uk-icon[uk-icon="icon:star"] svg polygon{
    fill: yellow;
}

Я просто разбираюсь в этом, поэтому, если я допустил ошибку, я надеюсь, что кто-то меня поправит, но, похоже, это работает для меня.

person Pete Smith    schedule 04.06.2020