Создать React Svg из массива элементов

Question

Учитывая массив, представляющий теги SVG,

(6) ["<svg id="Ebene_1" style={{"enableBackground":"new …rg/2000/svg" x="0px" y="0px" xmlSpace="preserve">", "<g>", "<polygon style={{"fillRule":"evenodd","clipRule":"…9,12 24,12 24,15 19,15 19,18 14,18 14,21 &#x9;"/>", "<path d="M3.4,20.5c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.2…,0.4h-3.3L3.7,20.4C3.6,20.5,3.5,20.5,3.4,20.5z"/>", "</g>", "</svg>"]
0: "<svg id="Ebene_1" style={{"enableBackground":"new 0 0 32 32"}} version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" xmlSpace="preserve">"
1: "<g>"
2: "<polygon style={{"fillRule":"evenodd","clipRule":"evenodd"}} points="9,21 9,24 4,24 4,27 8.5,27 9.4,27 13.7,27 18.8,27 23.9,27 29,27 &#xD;&#xA;&#x9;&#x9;29,12 24,12 24,15 19,15 19,18 14,18 14,21 &#x9;"/>"
3: "<path d="M3.4,20.5c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.1-0.5,0.1-0.6L24.5,5.2c0.1,0,0.2-0.1,0.2-0.1h3.4c0.2,0,0.4,0.2,0.4,0.4&#xD;&#xA;&#x9;&#x9;c0,0.2-0.2,0.4-0.4,0.4h-3.3L3.7,20.4C3.6,20.5,3.5,20.5,3.4,20.5z"/>"
4: "</g>"
5: "</svg>"
length: 6
__proto__: Array(0)

как мне восстановить svg в реакции.Это должно быть сделано на лету, поскольку предоставленное мне изображение является выбором пользователя, и поэтому я не могу просто реплицировать каждый элемент массива в реакции и передавать его в подпорки.

Answer 1

вы можете использовать svg-inline-loader с webpack.

Добавить загрузчик в конфигурации веб-пакета

    {
        test: /\.svg$/,
        loader: 'svg-inline-loader',
    },

Установить svg-inline-реагировать из npm

Вы можете импортировать svg следующим образом:

const icon = require('svg/icon.svg');

И вы можете использовать так:

import InlineSVG from 'svg-inline-react';

<InlineSVG src={require("svg-inline-loader!icon.svg")} />