我已经使用React完成了之前的2个项目,并使用Sass文件来设计组件的样式。但是在这个项目中,由于我必须为图像使用SVG,因此有些混乱。现在,我只能使用Sass文件来样式化SVG。
这里是codesandbox,仅包含 navbar 组件,我要在其中更改logoBookmark
svg的颜色。
我不想粘贴整个xml内容。所以我立即导入SVG
import logoBookmark from "../../images/logo-bookmark.svg"
,
并为src={logoBookmark}
标签设置img
。
要为外部SVG设置样式,我在堆栈溢出时发现了这个简单的solution。
但是我不知道如何在React中实现此功能,我有一个Sass文件,该文件进一步导入了JSX文件中。
那么有人可以分享这个问题的最佳解决方案吗?
答案 0 :(得分:0)
您需要将SVG导入为组件,以便将其安装为<svg/>
而不是<img/>
。 See adding SVG in CRA。
然后,您只需将circle
与CSS一起定位到svg
:
.logo {
circle {
fill: red;
}
}
import { ReactComponent as Logo } from "../../images/logo-bookmark.svg";
export default function NavBar() {
return (
<nav className="navbar">
<div className="brand">
<a href="/">
<Logo className="logo" />
</a>
</div>
</nav>
);
}