在 React 中更改 UIkit 图标的颜色

Question

如何更改 UIkit 图标的颜色。我正在使用反应组件。具体来说，我想改变分隔线图标的颜色：https : //getuikit.com/docs/divider

我已经尝试了这个问题的大部分答案：Can I change the color of Font Awesome's icon color? 他们都没有工作。

我也尝试将它包装在标签中或

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

谢谢。

Answer 1

在图标系统下方是插入标签的 svg，因此您只需设置 svg 的样式。

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

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

当然，您可以简单地将自己的类添加到包含 uk-icon 的元素中，以便更具体。