我正在处理一个现有的Symfony项目，前端使用Encore构建。我们正在将前端的一部分重构为React，我正处于要为图标添加SVG的位置。我不能使用img标签，路径作为源代码，所以我需要以某种方式内联SVG。
我尝试使用SVGR执行此操作，我看到SVG被转换为React组件，但是当我导入它们时，导入返回文件的路径，而不是实际的组件。
Encore配置：

Encore
.setOutputPath('web/build/react')

// the public path used by the web server to access the previous directory
.setPublicPath('/build/react')
.addEntry('react', '/react/app.js')
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())

// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()

// show OS notifications when builds finish/fail
.enableBuildNotifications()

.enableSingleRuntimeChunk()

.enableStimulusBridge('./react/controllers.json')
.enableTypeScriptLoader()

// create hashed filenames (e.g. app.abc123.css)
.enableVersioning()
.configureBabel((config)=>{
    config.presets.push('@babel/preset-react')
})
.addRule({
    test: /\.(sass|scss|svg|png|jpe?g)$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: "[local]-[hash:base64:8]"
                }
            }
        },
        'sass-loader'
    ]
})
.addRule({
    test: /\.svg/,
    type: "asset/resource",
    generator: {
        filename: "[path][name]-[hash][ext][query]"
    }
})

var configReact = Encore.getWebpackConfig();
configReact.target = ['browserslist'];
configReact.name = 'react';

configReact.resolve.alias = {
        "@symfony/stimulus-bridge/controllers.json": "/react/controllers.json",
        "@src": "/react/src",
}

图标组件：

import React from "react";
import { DecoratedProps } from "@src/types/componentHelpers";
import arrow from "@src/assets/icons/arrow.svg";

export interface Props {
    icon: IconType
}

export default class Icon extends React.Component<DecoratedProps<Props>> {
    constructor(props: DecoratedProps<Props>) {
        super(props);
    }

    render() {
        return (<Arrow />)
    }
}

我在createElement上得到一个错误，因为它试图使用文件路径作为标记名。