'How to add custom icons to the Shopware 6 plattform?

How can I add my custom SVG Icons to Shopware 6 and used it like in the official documentation:

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

Like: <sw-icon name="mycustom-shape-heart" color="#fc427b"></sw-icon>

svgiconsshopware


Solution 1:[1]

Unfortunately it is not possible "out of the box" via plugin.

The SVG icons of the development/platform are automatically loaded via webpack and svg-inline-loader. All icons are being collected and a small component gets created for each SVG icon. You can find the core icons and logic here: platform/src/Administration/Resources/app/administration/src/app/assets/icons.

However you could do something similar in your plugin. It is possible to create a custom webpack config here:

YouPlugin
- src
   - Resources
     - app
       - administration
         - build
           - webpack.config.js <-- custom webpack config
         - src
           - app
             - assets
               - icons
                 - svg <-- Your SVG icons
                 - icons.js <-- Component creation

Then you basically do the same as the core but with your own icons:

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
                    }
                }
            ]
        }
    };
};

And in your icons.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;
    }, []);
})();

If you only have a few icons this might be overkill. Maybe you could consider another approach like this (just for the plugin) and use another component like <custom-icon>: https://vuejs.org/v2/cookbook/editable-svg-icons.html

Solution 2:[2]

The solution for me was as described here (German only): https://forum.shopware.com/discussion/69422/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern#latest

Solution 3:[3]

Simply create a custom component and add SVG icon code in the component's twig file.

NOTE: component's name should start with "icons-" like 'icons-my-custom-icon'

Then you can use that icon with the sw-icon tag like:

<sw-icon name="my-custom-icon"></sw-icon>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Lukas Hillebrand
Solution 3 wp_lancer

Related Questions