diff --git a/README.md b/README.md index 119fb72..3705f46 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,49 @@ MprIcons::saveIconSet('material'); Full list: `MprIcons::list()` +## SVG Sprites + +For brand icons (payments, social), use the included SVG sprites. One request, multiple icons. + +### Payment Icons + +Include sprite once (hidden), use anywhere: + +```html + +{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/payments.svg"} + + + + + +``` + +Available: `visa`, `mastercard`, `amex`, `paypal`, `stripe`, `applepay`, `googlepay`, `klarna`, `ideal`, `bancontact`, `sepa`, `card` + +### Social Icons + +```html +{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/socials.svg"} + + + + +``` + +Available: `facebook`, `twitter`, `instagram`, `linkedin`, `youtube`, `tiktok`, `pinterest`, `whatsapp`, `telegram`, `email-social`, `share` + +### Styling SVG Sprites + +```css +/* Size */ +svg { width: 40px; height: 25px; } + +/* Or use classes */ +.payment-icon { width: 40px; height: 25px; } +.social-icon { width: 24px; height: 24px; } +``` + ## License MIT diff --git a/sprites/payments.svg b/sprites/payments.svg new file mode 100644 index 0000000..67cc01a --- /dev/null +++ b/sprites/payments.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sprites/socials.svg b/sprites/socials.svg new file mode 100644 index 0000000..c779c61 --- /dev/null +++ b/sprites/socials.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +