反应 svg 图像不使用 use 标签渲染

Question

I have a simple component here which takes in any svg image and stroke color and renders the styled svg accordingly. There are no error messages, just not rendering. I tried replacing the SVG and use tag with a simple image, and it renders the component fine - meaning that the SVG and use tag are the issues here. Not sure why. Any suggestions?

import React from 'react
import styled from 'styled-components'
import Truck from './Truck.svg'

const SVG = styled.svg`
  stroke: ${props => props.stroke || '#66CC00'};
`;

const Icon = props => {    
  const { src } = props;
  return (
    <SVG xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...props}>
      <use xlinkHref={src} />
    </SVG>
  );
};

const RenderIcon = () => <Icon src={Truck} stroke={red} />

For reference, this was what I was trying to duplicate: https://stackblitz.com/edit/react-6cr17y

Answer 1

Using the image SVG element, I could see the svg image.

Updated code - updated code to use use and href . Also updated the sandbox. This should apply the stroke property correctly.

import React from "react";
import styled from "styled-components";
import { ReactComponent as Truck } from "./Settings.svg";

const SVG = styled.svg`
  stroke: ${(props) => props.stroke || "#66CC00"};
`;

const Icon = ({ stroke }) => {
  return (
    <SVG viewBox="0 0 512 512" stroke={stroke}>
      <Truck />
      <use href={Truck} />
    </SVG>
  );
};

const RenderIcon = () => <Icon stroke={"red"} />;

export default RenderIcon;

Working example here - https://codesandbox.io/s/vibrant-clarke-73g8g?file=/src/App.js

OR,

import React from "react";
import styled from "styled-components";
import { ReactComponent as Truck } from "./Settings.svg";

const SVG = styled.svg`
  stroke: ${(props) => props.stroke || "#66CC00"};
`;

const Icon = ({ src, stroke }) => {
  return (
    <SVG viewBox="0 0 512 512" stroke={stroke}>
      {src()}
      <use href={src} />
    </SVG>
  );
};

const RenderIcon = () => <Icon src={Truck} stroke={"red"} />;

export default RenderIcon;

Answer 2

If you are using Create React App you can do this:

import React from "react";
import { ReactComponent as Truck } from "./truck.svg";

export default function App() {
  return (
    <div className="App">
      <MySvgComponent stroke="blue" svgToRender={() => <Truck />} />
    </div>
  );
}

function MySvgComponent({ strokeColor = "red", svgToRender }) {
  return (
    <>
      {svgToRender()}
      <svg>
        <use href="#mytruck" fill="green" stroke={strokeColor} />
      </svg>
    </>
  );
}

If not, you would need to install SVGR and use it as a webpack loader.