reactjs - 如何在 React 中更改外部导入的 SVG 的颜色？

Question

如果您有内部可用的 SVG，则很容易更改它的颜色。有没有办法改变来自服务器的 SVG 颜色？

这是示例。你可以分叉它。

import styled from "styled-components";

const App = () => {
  return (
    <StyledApp>
      {/* <HomeIcon /> */}
      {/* <img
        src="https://gist.githubusercontent.com/alieliacik/2df2a5fdf5b5c707f8dac91f390e01a1/raw/840c8efb0374ac0c3912dc36646abf0a9798832b/try.svg"
        alt="aa"
      /> */}

      <Svg src="https://gist.githubusercontent.com/alieliacik/2df2a5fdf5b5c707f8dac91f390e01a1/raw/840c8efb0374ac0c3912dc36646abf0a9798832b/try.svg" />
    </StyledApp>
  );
};

export default App;

const StyledApp = styled.div`
  display: flex;
  flex-direction: column;
`;

const Svg = styled.div`
  background-color: red;
  height: 80px;
  width: 80px;
  mask: ${({ src }) => `url(${src}) no-repeat `};
  mask-size: 80px 80px;
`;

https://codesandbox.io/s/global-theming-dynamic-icon-0npro?file=/src/App.js

标签： reactjssvgdynamicimportcolors

Answer 1

不，当 SVG 作为图像导入时，您不能更改其样式。如果你检查 DOM，你就会明白为什么。

<div src="https://gist.githubusercontent.com/alieliacik/
  2df2a5fdf5b5c707f8dac91f390e01a1/raw/
  840c8efb0374ac0c3912dc36646abf0a9798832b/try.svg"
  class="sc-ikXwFM luKyi"
></div>

div除了标签本身之外，没有什么可以定位的。

在您的沙箱中，您使用获取的 SVG 作为蒙版并更改背景颜色，很聪明。但这里的问题是您正在使用styled-components和设置 div 样式。

const Svg = styled.div`
  background-color: red;
  mask: ${({ src }) => `url(${src}) no-repeat center`};
`;

如果您改为渲染svg元素，您会看到您尝试的内容似乎有效。

const Svg = styled.svg`
  background-color: green;
  mask: ${({ src }) => `url(${src}) no-repeat center`};
`;

不过，我会给它一个更易于管理的高度/宽度。

const Svg = styled.svg`
  width: 1.5rem; // base 24px x 24px
  height: 1.5rem;
  background-color: green;
  mask: ${({ src }) => `url(${src}) no-repeat center`};
`;