Блог

Здесь у меня есть простой компонент, который принимает любое изображение svg и цвет обводки и соответствующим образом отображает стилизованный svg. Сообщений об ошибках нет, просто не отображается. Я попытался заменить SVG и использовать тег простым изображением, и он отлично отображает компонент — это означает, что SVG и use тег являются проблемами здесь. Не уверен, почему. Есть предложения?

 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} />
  

Для справки, это было то, что я пытался дублировать: https://stackblitz.com/edit/react-6cr17y

Используя элемент image SVG, я мог видеть изображение svg.

Обновленный код — обновленный код для использования use и href . Также обновлена песочница. Это должно stroke правильно применить свойство.

 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;
  

Рабочий пример здесь — https://codesandbox.io/s/vibrant-clarke-73g8g?file=/src/App.js

или,

 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;
  

Если вы используете приложение Create React, вы можете сделать это:

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

Если нет, вам нужно будет установить SVGR и использовать его в качестве загрузчика webpack.