Как добавить пользовательские значки в платформу Shopware 6? - PullRequest
1 голос
/ 20 июня 2020

Как я могу добавить свои собственные значки SVG в Shopware 6 и использовать их, как в официальной документации:

https://component-library.shopware.com/components/sw-icon/

Например: <sw-icon name="mycustom-shape-heart" color="#fc427b"></sw-icon>

Ответы [ 2 ]

2 голосов
/ 08 июля 2020

К сожалению, это невозможно "из коробки" через плагин.

Иконки SVG из development/platform автоматически загружаются через webpack и svg-inline-loader. Все значки собираются, и для каждого значка SVG создается небольшой компонент. Вы можете найти основные значки и logi c здесь: platform/src/Administration/Resources/app/administration/src/app/assets/icons.

Однако вы можете сделать что-то подобное в своем плагине. Здесь можно создать настраиваемую конфигурацию веб-пакета:

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://vuejs.org/v2/cookbook/editable-svg-icons.html

0 голосов
/ 15 июля 2020

Решение для меня было таким, как описано здесь (только на немецком языке): https://forum.shopware.com/discussion/69422/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern#latest

...