Add SVG sprites for payments and social icons
- sprites/payments.svg: Visa, Mastercard, Amex, PayPal, Stripe, Apple Pay, Google Pay, Klarna, iDEAL, Bancontact, SEPA - sprites/socials.svg: Facebook, Twitter/X, Instagram, LinkedIn, YouTube, TikTok, Pinterest, WhatsApp, Telegram - Updated README with sprite usage documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
43
README.md
43
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
|
||||
<!-- In your template head or hidden container -->
|
||||
{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/payments.svg"}
|
||||
|
||||
<!-- Use icons -->
|
||||
<svg width="38" height="24"><use href="#visa"/></svg>
|
||||
<svg width="38" height="24"><use href="#mastercard"/></svg>
|
||||
<svg width="38" height="24"><use href="#paypal"/></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"}
|
||||
|
||||
<svg width="24" height="24"><use href="#facebook"/></svg>
|
||||
<svg width="24" height="24"><use href="#instagram"/></svg>
|
||||
<svg width="24" height="24"><use href="#twitter"/></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
|
||||
|
||||
Reference in New Issue
Block a user