Shopware 6 Icons
Welche Icons werden von Shopware in der Version 6 im Standard angeboten?
Shopware 6 Icons Set: Hier bekommst du eine aktuelle Übersicht, welche Icons Shopware von Haus aus im Theme mitliefert und wie du diese in deinem Theme nutzen kannst. Aktuell hat Shopware zwei Sets hinzugefügt. Das „default“ und das „solid“ Set. Die Ordner zu den Icons findest du im folgenden Dateipfad: platform/src/Storefront/Resources/app/storefront/dist/assets/icon
Wie kann ich die Shopware 6 Icons für mein Theme nutzen?
Suche dir einfach in der Übersicht das passende Icon raus, kopiere den Namen und füge diesen wie nachfolgend beschrieben in dein dafür vorgesehenes Template ein.
Die Einbindung erfolgt im TWIG Template über den Tag: {% sw_icon 'icon-name' %}.
-
address -
alert -
align-center -
align-justify -
align-left -
align-right -
arrow-360-left -
arrow-360-right -
arrow-circle-down -
arrow-circle-left -
arrow-circle-right -
arrow-circle-up -
arrow-down -
arrow-head-down -
arrow-head-left -
arrow-head-right -
arrow-head-up -
arrow-left -
arrow-move-horizontal-axis -
arrow-move-vertical-axis -
arrow-right -
arrow-scroll -
arrow-simple-long-right -
arrow-switch -
arrow-turn-left -
arrow-turn-right -
arrow-up-down -
arrow-up -
avatar-multiple -
avatar -
bag-product -
bag -
basket -
beer -
bell-bell -
bell-crossed -
blocked -
bold -
bookmark -
books -
briefcase -
browser -
bug -
bulk-edit -
calendar-empty -
calendar -
cart -
chart-bar-filled -
chart-bar -
chart-pie -
chart-sales -
chart -
checkmark-block -
checkmark-circle -
checkmark-wide-block -
checkmark-wide -
checkmark -
circle-download -
circle-upload -
circle -
clock -
cloud-download -
cloud-upload -
cockpit -
code -
colorpicker -
content -
dashboard -
database -
debug -
desktop -
document-view -
drag-horizontal -
drag-vertical -
duplicate -
editor-align-left -
editor-align-right -
editor-bold -
editor-code -
editor-expand -
editor-italic -
editor-link -
editor-list-numberd -
editor-list-unordered -
editor-list -
editor-media -
editor-re-undo -
editor-redo -
editor-shrink -
editor-strikethrough -
editor-style -
editor-subscript -
editor-superscript -
editor-table -
editor-underline -
editor-undo -
emoji -
envelope -
error -
euro -
external -
eye-crossed -
eye-open -
file -
filter -
flag -
forward -
gamecontroler -
globe -
gps -
grab -
graduate-cap -
harddisk -
headset -
heart -
help -
history -
home -
hourglass -
image -
inbox -
infinity -
info -
italic -
keyboard -
lab-flask -
laptop -
layers -
layout -
lightbulb -
link -
list -
loading-circle -
loading-star -
lock-closed -
lock-fingerprint -
lock-key -
lock-open -
log-in -
log-out -
map-closed -
map-open -
map -
marker -
marketing -
medal -
micophone -
minus-block -
minus-circle -
minus-wide -
minus -
mobile -
money-card -
money-cash -
money-wallet -
moon -
more-horizontal -
more-vertical -
move-file -
package-closed -
package-gift -
package-open -
paint -
paper-pencil-signed -
paper-pencil -
paperclip -
paperplane -
pawn -
pencil-brush -
photocamera -
plastic-bag -
plug -
plus-block -
plus-circle -
plus-wide -
plus -
preview -
printer -
products -
pulse -
pushpin -
puzzle-piece -
quickjump -
quote -
replace -
reply -
rocket -
rule -
ruler-pencil -
save -
screen-full -
screen-minimize -
search -
server -
settings -
share -
shield -
shop -
shopware -
sidebar-close -
sidebar-open -
sliders-horizontal -
sliders -
sofa -
sort-down -
sort-up -
speech-bubble -
speech-bubbles -
square -
stack-block -
stack-circle -
stack -
star-half -
star -
sun -
tablet -
tags -
target-big -
target-with-block -
terminal -
text-table -
thumb-down -
thumb-up -
tools -
traffic-pawn -
trash -
tray-down -
tray-up -
triangle -
trophy -
underline -
variants -
video-camera -
view-compact -
view-grid -
view-normal -
view-split -
warning -
x-block -
x-circle -
x-wide -
x
-
arrow-360-left -
arrow-360-right -
arrow-double-double-right -
arrow-double-down -
arrow-double-left -
arrow-double-right -
arrow-double-up -
arrow-down-line -
arrow-down -
arrow-external -
arrow-large-double-down -
arrow-large-double-left -
arrow-large-double-right -
arrow-large-double-top -
arrow-large-down -
arrow-large-left -
arrow-large-right -
arrow-large-up -
arrow-left -
arrow-medium-double-left -
arrow-medium-double-right -
arrow-medium-down -
arrow-medium-left -
arrow-medium-right -
arrow-medium-up -
arrow-next-line -
arrow-reorder -
arrow-right -
arrow-up -
checkmark-circle -
checkmark-large -
checkmark-small -
checkmark-square -
checkmark -
circle-large -
circle-medium -
circle-small -
circle-x-small -
collapse -
copy -
exclamationmark -
expand -
eye -
h-collapse -
h-expand -
heart -
help -
image -
lock-closed -
lock-open -
minus-circle -
minus-large -
minus-small -
minus-square -
minus -
more -
pencil-paper -
pencil -
plus-circle -
plus-large -
plus-small -
plus-square -
plus -
printer -
questionmark -
rule -
search -
settings -
square -
stack-circle -
stack-filter -
stack-line -
stack-line2 -
stack-square -
star-half -
star -
textwrap -
thumb-down -
thumb-up -
trash -
traslated -
trending-down -
trending-up -
x-circle -
x-drag-horizontal -
x-drag-vertical -
x-large -
x-small -
x-square -
x
Wie kann ich eigene Icons für mein Shopware 6 Theme nutzen?
Wenn du schon ein eigenes Theme angelegt hast, musst du den Pfad wie oben angeben in deinem Theme als Orderstruktur nachbilden. Im Order „icon“ legst du dann deinen Ordern an. In meinem Fall habe ich den Ordner einfach mal „testpack“ genannt. Dort legst du dann dein Icon ab. Da Shopware 6 nicht auf deinen Ordner zugreifen kann, ohne dass du angibst, wo deine Datei liegt, musst du die „icon.html.twig“ erweitern. Dazu legst du in deinem Theme den Ordner „utilities“ unter der folgenden Ordnerstruktur an: platform/src/Storefront/Resources/views/storefront/utilities/icon.html.twig
Mein Theme habe ich „MyTheme“ genannt und wie schon erwähnt den Ordner der Shopware 6 Icons „testpack“.
Im letzten Schritt benötigst du nur noch das Template, wo du dein eigenes Icon einfügen möchtest. Ich habe als Beispiel das Icon der Suche im Header ausgewählt. Auch hier musst du erst einmal bei dir im Theme die „header.html.twig“ mit der richtigen Ordnerstruktur anlegen, bevor das Icon im Frontend überhaupt angezeigt wird. Hast du das gemacht, suche in der TWIG Datei, wo du dein Icon einfügen willst, die richtige Stelle und füge dein Snippet ein. Dazu muss das Snippet zusätzlich um ‚pack‘ : ‚Ordnername der Icons‘ als style Parameter mit ergänzt werden.
Also anstatt:
{% sw_icon 'search' %} sollte jetzt bei euch {% sw_icon 'search' style {'pack': 'testpack'} %} stehen.
Wenn alles klappt, sieht das Ergebnis wie folgt aus:
Default Search Icon Shopware 6
Eigenes Icon für die Suche
Du möchtest dein Template lieber von einer zertifizierten Shopware Agentur entwickeln lassen?
Dann melde dich einfach bei uns und wir reden darüber.