使用Sass在React中设置SVG样式

时间:2020-07-15 08:47:40

标签: javascript css reactjs svg sass

我已经使用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文件中。

那么有人可以分享这个问题的最佳解决方案吗?

1 个答案:

答案 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>
  );
}

Edit project1