Custom icon

[ivanb]

Hello,

Is it possible to create a custom icon that will be used on the administration module, since I don’t want to use existing icons?

[brettvormkopp]

Are you looking for this?: https://component-library.shopware.com/components/sw-icon/

[ivanb]

Actually no. I am looking for a way to create the custom icon that I will use as a component. For example

​
Shopware.Module.register('custom-module', { 
  type: 'plugin', 
  name: 'Custom', 
  title: 'Custom module', 
  description: 'Description for your custom module', 
  color: '#62ff80', 
  icon: 'my-custom-icon', 
});

​

Is there a way to create ‘my-custom-icon’ ?

[Pascal1988]

@ivanb schrieb:

Actually no. I am looking for a way to create the custom icon that I will use as a component. For example

​
Shopware.Module.register(‚custom-module‘, {
type: ‚plugin‘,
name: ‚Custom‘,
title: ‚Custom module‘,
description: ‚Description for your custom module‘,
color: ‚#62ff80‘,
icon: ‚my-custom-icon‘,
});

​

Is there a way to create ‚my-custom-icon‘ ?

I would like to know this aswell :) 

[wao_io]

I want to know, too.

[m.krueger]

Over a year now… any new hints on this?

[jfranke]

Heyo! I found some solutions for this. I’m not sure if it might be what you’re looking for or if it’s going to help someone. It has been more than 6 months since the last time I used this. Not sure if something has changed

Using own .SVG files:

• copy .svg to " custom/plugins/[THEME_NAME]/src/Resources/app/storefront/dist/assets/icon/[PACK_NAME]/[ICON_NAME].svg "

• run " bin/console asset:install "

• copy logic/block of " vendor/shopware/storefront/Resources/views/storefront/utilities/icon.html.twig "

• add the path of pack you created to the logic

    {% if pack == 'custom' %} 
       {{ source('@[THEME_NAME]/../app/storefront/dist/assets/icon/custom/[ICON_NAME].svg', ignore_missing = false) }} 
    {% else %}
       {{ source('@[THEME_NAME]/../app/storefront/dist/assets/icon/[PACK_NAME]/[ICON_NAME].svg', ignore_missing = true) }} 
    {% endif %}
  

• use icon as followed:
  {% sw_icon '[ICON_NAME]' style {'pack': '[PACK_NAME]', 'size': '3x'} %}

Using SVG custom icon-set:

• copy SVG code & paste it on specific block
• think about the color & change it in a class style
• think about the size
• set color on class & use „fill=„currentColor““ to change icon’s color
• Bootstrap icons

Using shopware 6 icon-set:

• Shopware icons

• Most of the names are wrong on website. Try the main word of the icon. For example if u wanna use the icon „default-action-save“ and you copy the name as it is, it wont work. If you use only the word „save“ for the icon, then the icon will show.

  {% sw_icon '[NAME_OF_SW_ICON]' style {'pack': 'xxx', 'color': '[colors that are defined under the admin/theme site]', 'size': '[sm, lg, etc]' } %}

Set custom icons

• German topic about setting custom icons

[Moorleiche]

For Backend/Admin still not available. The webpack.config.js from Shopware blocks the svg-inline-loader and all custom SVG are resolved as url.

Shopware SVG after load:

My custom SVG after load: