如何将我的自定义 SVG 图标添加到 Shopware 6 并像在官方文档中一样使用它：
https://component-library.shopware.com/components/sw-icon/
喜欢：<sw-icon name="mycustom-shape-heart" color="#fc427b"></sw-icon>
不幸的是，通过插件无法"开箱即用"。
development/platform的 SVG 图标通过 webpack 和svg-inline-loader自动加载。正在收集所有图标，并为每个SVG图标创建一个小组件。您可以在此处找到核心图标和逻辑：platform/src/Administration/Resources/app/administration/src/app/assets/icons。
但是，您可以在插件中执行类似操作。可以在这里创建自定义的 webpack 配置：
YouPlugin
- src
- Resources
- app
- administration
- build
- webpack.config.js <-- custom webpack config
- src
- app
- assets
- icons
- svg <-- Your SVG icons
- icons.js <-- Component creation
然后你基本上做与核心相同的操作，但使用自己的图标：
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = function () {
return {
module: {
rules: [
{
test: /.svg$/,
include: [
resolve('src/app/assets/icons/svg')
],
loader: 'svg-inline-loader',
options: {
removeSVGTagAttrs: false
}
}
]
}
};
};
在您的图标中.js：
export default (() => {
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;
}, []);
})();
如果您只有几个图标，这可能是矫枉过正。也许您可以考虑另一种这样的方法(仅适用于插件(并使用另一个组件，例如<custom-icon>： https://v2.vuejs.org/v2/cookbook/editable-svg-icons.html
只需创建自定义组件并在组件的 twig 文件中添加 SVG 图标代码即可。
注意：组件的名称应以"icons-"开头，例如"图标-我的自定义图标">
然后，您可以将该图标与sw-icon标签一起使用，例如：
<sw-icon name="my-custom-icon"></sw-icon>
我的解决方案如下所述(仅德语(： https://forum.shopware.com/discussion/69422/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern#latest