[英]can't change color of these icons from react icons library
无论我做什么,我都无法更改这 2 个反应图标的颜色,我不确定它们是否设置为不可更改。 之前用过其他图标,还没遇到这个问题,谢谢!
import React from "react";
import "./styles.css";
import { GrSubtractCircle, GrAddCircle } from "react-icons/gr";
export default function App() {
return (
<div className="App">
<GrAddCircle id="try"/>
</div>
);
}
css
#try{
color: green;
}
svg{
color: aqua;
}
svg 中路径中的笔触属性存在问题,默认为“#000”,这意味着它始终为黑色,应该为“currentColor”
作为解决此库中此特定元素的此问题的方法
我做了以下
import React from "react";
import { GrAddCircle } from "./Icons";
function App() {
return (
<div className="App">
<GrAddCircle
color="red"
title="folder icon"
className="additional-class-name"
/>
</div>
);
}
export default App;
然后在 src 我创建了一个名为 Icons 的文件夹作为我自己的自定义图标
然后在我创建的文件夹内 index.js
import React from "react";
export const GrAddCircle = ({ color, size, title, className }) => {
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
height={ size ? size : "1rem" }
width={ size ? size : "1rem" }
style={{ color }}
className={ className ? className : '' }
>
{ title ? <title>{title}</title> : null }
<path
fill="none"
stroke="currentColor"
strokeWidth="2"
d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,18 L12,6 M6,12 L18,12"
></path>
</svg>
);
};
这样你就可以基于 react-icons 创建自己的自定义图标,并直接从 Icons folder 导入
现在元素将具有属性大小(宽度、高度属性)、标题、类名和颜色。 如果需要,您可以添加更多自定义道具。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.