我正在处理一个现有的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
上得到一个错误,因为它试图使用文件路径作为标记名。
1条答案
按热度按时间wvt8vs2t1#
我设法解决这个问题的帮助下:https://github.com/symfony/webpack-encore/issues/886 .
主要的问题是Encore有一些默认的加载器,它配置水下,其中一个拿起所有的图像,并使用文件加载器对他们。
我不得不重新配置加载器以忽略SVG。我在webpack.config.js中添加了下一个代码:
我的图标组件现在如下所示:
当然,这可以重新配置,以适应特定的情况。希望这对处于同样情况的人有所帮助。