Add complete SVG sprite system with all variants
Payment sprites (16 files, 38 brands each): - Shapes: icon, square, rectangle, text-only - Modes: lm (light), dm (dark), la (light-accent), da (dark-accent) Social sprites (12 files, 11-12 brands each): - Shapes: icon, full-logo, text-only - Same 4 color modes Includes build-sprites.php to regenerate from source materials. Updated README with complete documentation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
130
README.md
130
README.md
@@ -116,56 +116,114 @@ Full list: `MprIcons::list()`
|
||||
|
||||
For brand icons (payments, social), use the included SVG sprites. One request, multiple icons.
|
||||
|
||||
### Payment Icons
|
||||
### Sprite Structure
|
||||
|
||||
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-color"/></svg>
|
||||
<svg width="38" height="24"><use href="#mastercard-color"/></svg>
|
||||
<svg width="38" height="24"><use href="#paypal-color"/></svg>
|
||||
```
|
||||
sprites/
|
||||
├── payments/
|
||||
│ ├── icon-lm.svg # Logo mark, light mode
|
||||
│ ├── icon-dm.svg # Logo mark, dark mode
|
||||
│ ├── icon-la.svg # Logo mark, light accent
|
||||
│ ├── icon-da.svg # Logo mark, dark accent
|
||||
│ ├── square-lm.svg # Square format, light mode
|
||||
│ ├── square-dm.svg # Square format, dark mode
|
||||
│ ├── square-la.svg # Square format, light accent
|
||||
│ ├── square-da.svg # Square format, dark accent
|
||||
│ ├── rectangle-lm.svg # Button shape, light mode
|
||||
│ ├── rectangle-dm.svg # Button shape, dark mode
|
||||
│ ├── rectangle-la.svg # Button shape, light accent
|
||||
│ ├── rectangle-da.svg # Button shape, dark accent
|
||||
│ ├── text-only-lm.svg # Text only, light mode
|
||||
│ ├── text-only-dm.svg # Text only, dark mode
|
||||
│ ├── text-only-la.svg # Text only, light accent
|
||||
│ └── text-only-da.svg # Text only, dark accent
|
||||
└── socials/
|
||||
├── icon-lm.svg
|
||||
├── icon-dm.svg
|
||||
├── icon-la.svg
|
||||
├── icon-da.svg
|
||||
├── full-logo-lm.svg
|
||||
├── full-logo-dm.svg
|
||||
├── full-logo-la.svg
|
||||
├── full-logo-da.svg
|
||||
├── text-only-lm.svg
|
||||
├── text-only-dm.svg
|
||||
├── text-only-la.svg
|
||||
└── text-only-da.svg
|
||||
```
|
||||
|
||||
Available (27 icons):
|
||||
### Variants Explained
|
||||
|
||||
| Card Networks | Wallets | BNPL | Regional |
|
||||
|---------------|---------|------|----------|
|
||||
| `visa-color` | `paypal-color` | `klarna-color` | `ideal-color` |
|
||||
| `mastercard-color` | `apple_pay-color` | `alma-color` | `bancontact-color` |
|
||||
| `american_express-color` | `google_pay-color` | `affirm-color` | `blik-color` |
|
||||
| `discover-color` | `samsung_pay-color` | `afterpay-color` | `eps-color` |
|
||||
| `jcb-color` | `revolut-color` | | `multibanco-color` |
|
||||
| `unionpay-color` | `alipay-color` | | `p24-color` |
|
||||
| `card-color` | `wechat_pay-color` | | `sepa-color` |
|
||||
| | `satispay-color` | | `twint-color` |
|
||||
| | `mobilepay-color` | | |
|
||||
| | `link-color` | | |
|
||||
| | `stripe-color` | | |
|
||||
| Suffix | Mode | Use Case |
|
||||
|--------|------|----------|
|
||||
| `-lm` | Light Mode | Dark icons for light backgrounds |
|
||||
| `-dm` | Dark Mode | White icons for dark backgrounds |
|
||||
| `-la` | Light Accent | Brand colors on light backgrounds |
|
||||
| `-da` | Dark Accent | Brand colors on dark backgrounds |
|
||||
|
||||
| Shape | Description | Typical Size |
|
||||
|-------|-------------|--------------|
|
||||
| `icon` | Logo mark only | 24×24, 32×32 |
|
||||
| `square` | Square with padding | 45×45 |
|
||||
| `rectangle` | Card/button shape | 60×38 |
|
||||
| `text-only` | Brand name text | varies |
|
||||
| `full-logo` | Logo + brand name (socials) | varies |
|
||||
|
||||
### Payment Icons
|
||||
|
||||
Copy the sprite you need to your module, include once, use anywhere:
|
||||
|
||||
```php
|
||||
// In module install or build step
|
||||
copy(
|
||||
_PS_MODULE_DIR_ . 'yourmodule/vendor/myprestarocks/prestashop-icons/sprites/payments/square-lm.svg',
|
||||
_PS_MODULE_DIR_ . 'yourmodule/views/img/payments.svg'
|
||||
);
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Include sprite (hidden) -->
|
||||
{include file="module:yourmodule/views/img/payments.svg"}
|
||||
|
||||
<!-- Use icons -->
|
||||
<svg width="45" height="45"><use href="#visa_lm"/></svg>
|
||||
<svg width="45" height="45"><use href="#mastercard_lm"/></svg>
|
||||
<svg width="45" height="45"><use href="#paypal_lm"/></svg>
|
||||
```
|
||||
|
||||
**Available payment brands (38):**
|
||||
|
||||
afterpay, alipay, alma, amazon_pay, american_express, apple_pay, bacs, bancontact, bank, Billie, blik, cartes_bancaires, cod, credit_pay, eps, google_pay, ideal, jcb, kakao_pay, klarna, link, mastercard, mobilepay, multibanco, naverpay, p24, payco, paypal, pickup, point_of_sale, revolut, samsung_pay, satispay, sepa, twint, unionpay, visa, wechat_pay
|
||||
|
||||
### Social Icons
|
||||
|
||||
```html
|
||||
{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/socials.svg"}
|
||||
{include file="module:yourmodule/views/img/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>
|
||||
<svg width="24" height="24"><use href="#facebook_lm"/></svg>
|
||||
<svg width="24" height="24"><use href="#x_lm"/></svg>
|
||||
<svg width="24" height="24"><use href="#instagram_lm"/></svg>
|
||||
```
|
||||
|
||||
Available: `facebook`, `twitter`, `instagram`, `linkedin`, `youtube`, `tiktok`, `pinterest`, `whatsapp`, `telegram`, `email-social`, `share`
|
||||
**Available social brands (12):**
|
||||
|
||||
### Styling SVG Sprites
|
||||
amazon, apple, facebook, google, LinkedIn, microsoft, outlook, paypal, reddit, tiktok, x, yahoo
|
||||
|
||||
### Icon ID Format
|
||||
|
||||
Icon IDs follow the pattern: `{brand}_{mode}`
|
||||
|
||||
Examples:
|
||||
- `visa_lm` - Visa, light mode
|
||||
- `visa_dm` - Visa, dark mode
|
||||
- `paypal_la` - PayPal, light accent
|
||||
- `facebook_da` - Facebook, dark accent
|
||||
|
||||
### Styling
|
||||
|
||||
```css
|
||||
/* Size */
|
||||
svg { width: 40px; height: 25px; }
|
||||
|
||||
/* Or use classes */
|
||||
.payment-icon { width: 40px; height: 25px; }
|
||||
.payment-icon { width: 45px; height: 45px; }
|
||||
.payment-icon-rect { width: 60px; height: 38px; }
|
||||
.social-icon { width: 24px; height: 24px; }
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user