javascript - 使用 Sass 在 React 中设置 svg 样式

Question

我之前的 2 个元素都是用 React 完成的，并且使用 Sass 文件来设计组件的样式。但在这个元素中，它变得有点困惑，因为我必须为我的图像使用 SVG。现在我一直在使用 Sass 文件设计 SVG 样式。

这是 codesandbox仅包括我想更改 logoBookmark svg 颜色的 navbar 组件。

我不想粘贴整个 xml 内容。所以我直接导入 SVG

从“../../images/logo-bookmark.svg”导入 logoBookmark,

并为 img 标签设置 src={logoBookmark}。

要设置外部 SVG 的样式，我发现这个很简单 solution堆栈溢出。

但我不知道如何在 React 中实现这一点，我有一个 Sass 文件，该文件进一步导入到 JSX 文件中。

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

Answer 1

您需要将 SVG 作为组件导入，这样它就会挂载为 <svg/>而不是 <img/> . See adding SVG in CRA .

然后您只需要定位 circle与 svg使用 CSS:

.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>
  );
}