在 React 中使用 Sass 样式化 svg

Posted 2023-03-06

【中文标题】在 React 中使用 Sass 样式化 svg

【英文标题】：Styling svg in React with Sass

【发布时间】：2020-11-04 17:22:54

【问题描述】：

我用 React 完成了我之前的 2 个项目，并使用 Sass 文件来设置组件的样式。但是在这个项目中，它变得有点令人困惑，因为我必须为我的图像使用 SVG。现在我被困在使用 Sass 文件设计 SVG 样式上。

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

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

import logoBookmark from "../../images/logo-bookmark.svg",

并将src=logoBookmark 设置为img 标签。

为了设置外部 SVG 的样式，我在堆栈溢出时发现了这个简单的 solution。

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

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

【问题讨论】：

请展示一个可重现的示例，请参阅How do I ask a good question?、How to create a Minimal, Reproducible Example。向我们展示一个带有 svg 的沙箱 (codesandbox)、您尝试设置的样式、尝试过的内容以及无效的内容。在 *** 中，我们提出的是具体问题，而不是“最佳解决方案”，这对于一个问题来说过于宽泛，并且取决于项目。

@DennisVash 我提供了代码框链接。我正在寻找更改 JSX 文件中 import 的 logoBookmark 的颜色。

请注意，这不是一个最小的示例，相反，您应该只显示 SVG 而没有围绕它的所有项目。

【参考方案1】：

您需要将 SVG 作为组件导入，以便将其安装为 <svg/> 而不是 <img/>。 See adding SVG in CRA.

那么你只需要使用 CSS 定位 circle 和 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>
  );