Принятие SVG в качестве опоры для компонента React

Question

Я работаю над компонентом React, который должен принимать SVG в качестве реквизита.

У меня есть svg по умолчанию на случай, если опора не предоставлена, но если она предоставлена, то svg по умолчанию можно заменить на ту, которая принята от prop.

Так что компонент похож.

<MySvg src={path to svg or the svg itself} height={20} width={20} fillColor={'red'} />

Все, что должен сделать компонент, это отобразить этот SVG с предоставленными реквизитами. Я ожидаю, что DOM будет примерно таким.

<svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}>
    <g>
        <rect />
    </g>
</svg>

Поскольку каждый SVG отличается, то есть может иметь многоугольник, прямоугольник, g и т. Д., Как лучше всего это сделать?

2 вещи, которые я ищу?

1. Загрузка SVG с пути и применение реквизита (цвет, высота, ширина)?
2. Если src prop имеет сам SVG, как мы можем отобразить это и применить реквизит (цвет, высота, ширина)

Обновление: Я опробовал один из подходов в ответах ниже, но, похоже, он не работает. Вот ссылка на CodeSandbox, который у меня на месте - codesandbox.io / s / n0yzv9yyvp

Answer 1

Лучше всего будет использовать данные URI.

Пример:

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

Подробнее читайте здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Answer 2

Я много работал с SVG в response.js, лучшее решение, которое я нашел, это использовать embed svg:

<MySvg src={'/path/to/svg'} height={20} width={20} fillColor={'red'} />

И внутри вашего компонента

<svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}>
  <g>
    <image
      x="10"
      y="197"
      width="159"
      height="113"
      xlinkHref={this.props.src}
    />
  </g>
</svg>

x, y, width и height - это обычные параметры тега image svg, их можно пропустить или переписать, как вы хотите