reactjs 未使用Encore、SVGR和React正确导入SVG

rqdpfwrv  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(240)

我正在处理一个现有的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上得到一个错误,因为它试图使用文件路径作为标记名。

wvt8vs2t

wvt8vs2t1#

我设法解决这个问题的帮助下:https://github.com/symfony/webpack-encore/issues/886 .
主要的问题是Encore有一些默认的加载器,它配置水下,其中一个拿起所有的图像,并使用文件加载器对他们。
我不得不重新配置加载器以忽略SVG。我在webpack.config.js中添加了下一个代码:

Encore.configureLoaderRule("images", (loaderRule) => {
    loaderRule.test = new RegExp(loaderRule.test.toString().replace('|svg', ''));
  });

我的图标组件现在如下所示:

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

export enum IconType {
    Arrow = "Arrow",
    Vrijwilliger = "Vrijwilliger",
}

export interface Props {
    icon: IconType
}

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

    iconLookup = {
        [IconType.Arrow]: <Arrow />,
        [IconType.Vrijwilliger]: <Vrijwilliger />
    }

    render() {
        const SVG = this.iconLookup[this.props.icon]
        return (<>{SVG}</>)
    }
}

当然,这可以重新配置,以适应特定的情况。希望这对处于同样情况的人有所帮助。

相关问题