Shopware 6.5插件自定义SVG图标加载失败问题求助

问题核心原因 #

Shopware 6.5 升级后，Webpack资源处理逻辑发生变化：弃用了原有的url-loader，改用Webpack 5的Asset Modules，导致你原有的排除url-loader的配置完全失效。同时，图标名称解析逻辑与实际文件名不匹配，进一步加剧了模块找不到的错误。

解决方案 #

一、适配Shopware 6.5的Webpack配置

修改webpack.config.js，针对Asset Modules调整排除规则，确保自定义SVG被svg-inline-loader正确处理：

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = (baseConf) => {
    // 排除自定义SVG目录，避免被Asset Modules默认处理
    baseConf.config.module.rules.forEach((rule) => {
        if (rule.type === 'asset' && rule.test.test('.svg')) {
            rule.exclude = rule.exclude || [];
            rule.exclude.push(resolve('src/app/assets/icons/svg'));
        }
    });

    // 配置svg-inline-loader处理自定义SVG
    return {
        module: {
            rules: [
                {
                    test: /\.svg$/,
                    include: [resolve('src/app/assets/icons/svg')],
                    use: [
                        {
                            loader: 'svg-inline-loader',
                            options: {
                                removeSVGTagAttrs: false,
                            }
                        }
                    ]
                }
            ]
        }
    };
};

二、修正图标名称解析逻辑

你的SVG文件名是icons-image-name-multicolor.svg，但当前代码解析出的名称与Twig中使用的image-name-multicolor不匹配。修改icons.js中的名称解析逻辑：

const context = require.context('./svg', false, /\.svg$/);

return context.keys().reduce((accumulator, item) => {
    // 从文件名提取正确图标名：移除前缀"icons-"和后缀".svg"
    const fileName = item.split('/').pop();
    const componentName = fileName.replace(/^icons-/, '').replace(/\.svg$/, '');
    
    const component = {
        name: componentName,
        functional: true,
        render(createElement, elementContext) {
            const data = elementContext.data;

            return createElement('span', {
                class: [data.staticClass, data.class],
                style: data.style,
                attrs: data.attrs,
                on: data.on,
                domProps: {
                    innerHTML: context(item),
                },
            });
        },
    };

    accumulator.push(component);
    return accumulator;
}, []);

三、收尾验证步骤

1. 确保svg-inline-loader已安装：执行npm install svg-inline-loader --save-dev
2. 重新构建插件：运行./psh.phar administration:build（对应环境的构建命令）
3. 清除所有缓存：包括Shopware后台缓存、浏览器缓存及临时构建文件

内容的提问来源于stack exchange，提问作者alexD