Я работаю над плагином для Shopware 6.5 и столкнулся с проблемой загрузки пользовательских значков SVG. Плагин отлично работал в Shopware 6.4, но после обновления до 6.5 я получаю следующую ошибку:
Uncaught (in promise) Error: Cannot find module './image/name-multicolor.svg'
Вот мой код для пользовательской конфигурации Webpack (webpack.config.js):
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = (baseConf) => {
// Exclude the plugin's icons from being loaded via a url-loader
baseConf.config.module.rules.forEach((rule) => {
if (rule.loader === 'url-loader') {
if (!rule.exclude) {
rule.exclude = [];
}
rule.exclude.push(resolve('src/app/assets/icons/svg'));
}
});
// Add svg-inline-loader for the plugin icons
return {
module: {
rules: [
{
test: /\.svg$/,
include: [
resolve('src/app/assets/icons/svg'),
],
loader: 'svg-inline-loader',
options: {
removeSVGTagAttrs: false,
},
},
],
},
};
};
Вот как я импортирую и регистрирую свои пользовательские значки SVG в icons.js:
const context = require.context('./svg', false, /svg$/);
return context.keys().reduce((accumulator, item) => {
const componentName = item.split('.')[1].split('/')[1];
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;
}, []);
})();
Это ветка, где я ее использую:
{% block settings_icon %}
<sw-icon name = "image-name-multicolor" size = "30" multicolor></sw-icon>
{% endblock %}
Путь к svg-изображению:
src/Resources/app/administration/src/app/assets/icons/svg/icons-image-name-multicolor.svg
Я уже проверил следующее:
1.Путь к файлам SVG правильный и указывает на каталог, содержащий файлы SVG.
2. Я очистил кеши, временные файлы и сгенерированные активы, а затем повторно запустил процесс сборки.
Несмотря на попытки выполнить эти шаги, я все равно получаю ту же ошибку. Что может быть причиной этой проблемы, и как я могу ее решить? Любая помощь будет оценена по достоинству.
Начиная с Shopware 6.5 используется набор иконок метеора. Кроме того, большинство иконок загружаются асинхронно. Соглашение об именах предполагает, что слово перед первым тире — это папка, в которой находится значок. Так, например, regular-circle
будет преобразован в асинхронный импорт следующим образом:
import('@shopware-ag/meteor-icon-kit/icons/regular/circle.svg')
Для справки см. компонент sw-icon.
Это должно объяснить, почему ваш пользовательский значок не может быть разрешен в каталоге стороннего поставщика в @shopware-ag/meteor-icon-kit/icons/image/name-multicolor.svg
.
Вы можете попробовать добавить псевдоним пути в конфигурацию вашего веб-пакета, указывающий на ваши пользовательские значки.