如何動態更改SVG填充顏色？

Question

我想在沒有內聯 SVG 標簽的情況下動態更改 SVG 圖像的顏色（必須靜態放入<svg> 、 <path="...">等），以便消費者可以自由使用他們想要的任何 SVG 圖像和顏色.

用戶所要做的就是傳入 SVG 標簽的 src 和一個十六進制顏色，我的代碼應該動態地將這些顏色填充應用到 SVG 標簽中。

你有什么建議嗎？ 謝謝！

消費者看到的：

import Frame from './Frame.svg';
...
<Icon src={Frame} color='purple' />

我對 UI 組件代碼的嘗試：

import React from 'react';
import styled from 'styled-components';

const Icon = ({ src, color }) => {
  const StyledSVGIcon = styled(src)`
    width: 67px;
    height: 72px; 
    fill: ${color};
  `;
  return <StyledSVGIcon />
};

框架.svg

<svg width="73" height="71" viewBox="0 0 73 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
<path d="M64.2117 52.8725C63.8737 52.8725 63.1978 52.8725 62.8598 52.5305L56.7765 46.3739C56.1005 45.6898 56.1005 45.0058 56.7765 44.3217C57.4524 43.6376 58.1283 43.6376 58.8043 44.3217L64.8876 50.4783C65.5635 51.1623 65.5635 51.8464 64.8876 52.5305C65.2255 52.8725 64.5496 52.8725 64.2117 52.8725Z" fill="#4B286D"/>
<path d="M33.4287 65.4711H2.31425C1.32124 65.4711 0.990234 64.8064 0.990234 64.1417V19.2757C0.990234 18.9434 1.32124 18.2787 1.32124 17.9464L19.1955 0C19.1955 0.33234 19.8575 0 20.1885 0H52.958C53.951 0 54.282 0.664681 54.282 1.32936V43.2043C54.282 44.2013 53.62 44.5336 52.958 44.5336C52.296 44.5336 51.634 43.8689 51.634 43.2043V2.99106H21.1815L3.96928 19.9404V62.48H33.7597C34.7527 62.48 35.0837 63.1447 35.0837 63.8094C35.0837 64.474 34.4217 65.4711 33.4287 65.4711Z" fill="#4B286D"/>
<path d="M20.1885 20.9374H2.31425C1.32124 20.9374 0.990234 20.2728 0.990234 19.6081C0.990234 18.6111 1.65224 18.2787 2.31425 18.2787H18.5335V1.32936C18.5335 0.33234 19.1955 0 19.8575 0C20.5195 0 21.1815 0.664681 21.1815 1.32936V19.2757C21.5125 20.2728 21.1815 20.9374 20.1885 20.9374Z" fill="#4B286D"/>
<path d="M38.1892 30.2127C34.1336 30.2127 30.754 28.2953 30.754 25.7389C30.754 24.7802 31.4299 24.4606 32.1058 24.4606C33.1197 24.1411 33.7956 24.7802 33.7956 25.7389C33.7956 26.6975 35.8234 27.6562 38.1892 27.6562C40.5549 27.6562 42.5827 26.378 42.5827 25.4193C42.5827 24.7802 41.5688 23.8215 38.1892 23.5019H37.8512C36.1614 23.1824 30.416 22.2237 30.416 18.7086C30.416 15.8325 33.7956 13.5956 37.8512 13.5956C41.9068 13.5956 45.2864 15.513 45.2864 18.0695C45.2864 19.0281 44.6105 19.3477 43.9345 19.3477C42.9206 19.6672 42.2447 19.0281 42.2447 18.0695C42.2447 17.1108 40.2169 16.1521 37.8512 16.1521C35.4855 16.1521 33.4577 17.4303 33.4577 18.389C33.4577 19.0281 34.4716 19.9868 37.8512 20.3064H38.1892C40.2169 20.6259 45.6243 21.5846 45.6243 25.0997C45.6243 27.6562 42.2447 30.2127 38.1892 30.2127Z" fill="#4B286D"/>
<path d="M22.9547 32.9327H7.45939C6.42637 32.9327 6.08203 32.3285 6.08203 31.7242C6.08203 31.1199 6.77071 30.5157 7.45939 30.5157H22.9547C23.9877 30.5157 24.332 31.1199 24.332 31.7242C24.332 32.3285 23.9877 32.9327 22.9547 32.9327Z" fill="#4B286D"/>
<path d="M41.275 45.017H8.91115C7.93042 45.017 7.60352 44.4128 7.60352 43.8085C7.60352 43.2042 8.25733 42.6 8.91115 42.6H41.275C42.2558 42.6 42.5827 43.2042 42.5827 43.8085C42.5827 44.4128 41.9289 45.017 41.275 45.017Z" fill="#4B286D"/>
<path d="M19.9078 57.1024H7.46461C6.42768 57.1024 6.08203 56.4981 6.08203 55.8939C6.08203 55.2896 6.77332 54.6854 7.46461 54.6854H19.9078C20.9447 54.6854 21.2904 55.2896 21.2904 55.8939C21.2904 56.4981 20.9447 57.1024 19.9078 57.1024Z" fill="#4B286D"/>
<path d="M38.0175 33.2346C37.1049 33.2346 36.8008 32.5632 36.8008 31.8918V10.4071C36.8008 9.40003 37.4091 9.06433 38.0175 9.06433C38.6258 9.06433 39.2341 9.73573 39.2341 10.4071V31.5561C39.2341 32.5632 38.6258 33.2346 38.0175 33.2346Z" fill="#4B286D"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="73" height="71" fill="white"/>
</clipPath>
</defs>
</svg>

Answer 1

以下是如何將顏色傳遞給 SVG 的示例：

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [colorChosen, setColorChosen] = useState("red");

  return (
    <div>
      <h1>Hello Stack Overflow!</h1>
      <StyledSVG 
        color={colorChosen} 
        src={'https://lh3.googleusercontent.com/proxy/CWRs9ihXEx4EMOglFfeT70ir74KeyxILHB6Dkm7oLIufKfeI02Xi6YdNAEbaGwT8LecfPDe_7A6UrKXuyNOi_LpsTVO7jIrqxdPX2vQ2nq2W-re_1IrMZwxgAwoq6t_W5rNx6QEaU96ai2MmJsI'}
        />
    </div>
  );
}

const StyledSVG = styled.svg`
  width: 500px;
  height: 500px;
  background-color: ${(props) => props.color};
  background-image: url(${(props) => props.src});
`;

默認情況下，顏色設置為紅色，但通過一些額外的滑塊，您可以將 rbg/hex 值傳遞給樣式化的<svg /> 。

CodeSandbox： https ://codesandbox.io/s/stack-63910588-pass-color-to-svg-birthday-card-ievg7 ? file =/ src/App.js

---

OP澄清說他們想改變孩子們的顏色。 在這種情況下，這有效：

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [colorChosen, setColorChosen] = useState("green");

  return (
    <Container>
      <StyledSVG color={colorChosen} width="73" height="71" viewBox="0 0 73 71">
        <Frame />
      </StyledSVG>
    </Container>
  );
}

const Frame = () => {

  // This can also be abstracted to its own js file.

  return (
  <>
  <g clip-path="url(#clip0)">
  <path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
  <path d="M64.2117 52.8725C63.8737 52.8725 63.1978 52.8725 62.8598 52.5305L56.7765 46.3739C56.1005 45.6898 56.1005 45.0058 56.7765 44.3217C57.4524 43.6376 58.1283 43.6376 58.8043 44.3217L64.8876 50.4783C65.5635 51.1623 65.5635 51.8464 64.8876 52.5305C65.2255 52.8725 64.5496 52.8725 64.2117 52.8725Z" fill="#4B286D"/>
  <path d="M33.4287 65.4711H2.31425C1.32124 65.4711 0.990234 64.8064 0.990234 64.1417V19.2757C0.990234 18.9434 1.32124 18.2787 1.32124 17.9464L19.1955 0C19.1955 0.33234 19.8575 0 20.1885 0H52.958C53.951 0 54.282 0.664681 54.282 1.32936V43.2043C54.282 44.2013 53.62 44.5336 52.958 44.5336C52.296 44.5336 51.634 43.8689 51.634 43.2043V2.99106H21.1815L3.96928 19.9404V62.48H33.7597C34.7527 62.48 35.0837 63.1447 35.0837 63.8094C35.0837 64.474 34.4217 65.4711 33.4287 65.4711Z" fill="#4B286D"/>
  <path d="M20.1885 20.9374H2.31425C1.32124 20.9374 0.990234 20.2728 0.990234 19.6081C0.990234 18.6111 1.65224 18.2787 2.31425 18.2787H18.5335V1.32936C18.5335 0.33234 19.1955 0 19.8575 0C20.5195 0 21.1815 0.664681 21.1815 1.32936V19.2757C21.5125 20.2728 21.1815 20.9374 20.1885 20.9374Z" fill="#4B286D"/>
  <path d="M38.1892 30.2127C34.1336 30.2127 30.754 28.2953 30.754 25.7389C30.754 24.7802 31.4299 24.4606 32.1058 24.4606C33.1197 24.1411 33.7956 24.7802 33.7956 25.7389C33.7956 26.6975 35.8234 27.6562 38.1892 27.6562C40.5549 27.6562 42.5827 26.378 42.5827 25.4193C42.5827 24.7802 41.5688 23.8215 38.1892 23.5019H37.8512C36.1614 23.1824 30.416 22.2237 30.416 18.7086C30.416 15.8325 33.7956 13.5956 37.8512 13.5956C41.9068 13.5956 45.2864 15.513 45.2864 18.0695C45.2864 19.0281 44.6105 19.3477 43.9345 19.3477C42.9206 19.6672 42.2447 19.0281 42.2447 18.0695C42.2447 17.1108 40.2169 16.1521 37.8512 16.1521C35.4855 16.1521 33.4577 17.4303 33.4577 18.389C33.4577 19.0281 34.4716 19.9868 37.8512 20.3064H38.1892C40.2169 20.6259 45.6243 21.5846 45.6243 25.0997C45.6243 27.6562 42.2447 30.2127 38.1892 30.2127Z" fill="#FFFFFF"/>
  <path d="M22.9547 32.9327H7.45939C6.42637 32.9327 6.08203 32.3285 6.08203 31.7242C6.08203 31.1199 6.77071 30.5157 7.45939 30.5157H22.9547C23.9877 30.5157 24.332 31.1199 24.332 31.7242C24.332 32.3285 23.9877 32.9327 22.9547 32.9327Z" fill="#4B286D"/>
  <path d="M41.275 45.017H8.91115C7.93042 45.017 7.60352 44.4128 7.60352 43.8085C7.60352 43.2042 8.25733 42.6 8.91115 42.6H41.275C42.2558 42.6 42.5827 43.2042 42.5827 43.8085C42.5827 44.4128 41.9289 45.017 41.275 45.017Z" fill="#4B286D"/>
  <path d="M19.9078 57.1024H7.46461C6.42768 57.1024 6.08203 56.4981 6.08203 55.8939C6.08203 55.2896 6.77332 54.6854 7.46461 54.6854H19.9078C20.9447 54.6854 21.2904 55.2896 21.2904 55.8939C21.2904 56.4981 20.9447 57.1024 19.9078 57.1024Z" fill="#4B286D"/>
  <path d="M38.0175 33.2346C37.1049 33.2346 36.8008 32.5632 36.8008 31.8918V10.4071C36.8008 9.40003 37.4091 9.06433 38.0175 9.06433C38.6258 9.06433 39.2341 9.73573 39.2341 10.4071V31.5561C39.2341 32.5632 38.6258 33.2346 38.0175 33.2346Z" fill="#4B286D"/>
  </g>
  <defs>
  <clipPath id="clip0">
  <rect width="73" height="71" fill="white"/>
  </clipPath>
  </defs>
  </>
  );
  
};

const Container = styled.div`
  height: 500px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

`;

const StyledSVG = styled.svg`
  & path {
    fill: ${props => props.color};
  }
`;