Fix source file naming, rebuild sprites, add dev tools

- Fix bank_transfer -> bank naming in icon/square shapes
- Fix quote_la -> quote_lm in light-mode directories
- Fix rectangle naming (amazon_pay, bacs, naverpay, p24)
- Fix case sensitivity (LinkedIn -> linkedin, Bancontact -> bancontact, etc.)
- Add _lm suffix to rectangle/light-mode files
- Copy X icon to full-logo and text-only (same symbol)
- Add preview.html for visual testing
- Add .htaccess restricting access to dev IP
- Update README with correct lowercase brand names

All 38 payment brands and 12 social brands now complete.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-27 11:27:17 +00:00
parent 724eba4cd6
commit d694f9f21f
32 changed files with 5084 additions and 4437 deletions

View File

@@ -1,25 +1,65 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
<symbol id="LinkedIn_dm" viewBox="0 0 45 45"><defs>
<rect id="LinkedIn_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<clipPath id="LinkedIn_dm_SVGID_00000067207488217466862340000013022568391259568783_">
<use xlink:href="#LinkedIn_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#LinkedIn_dm_SVGID_00000067207488217466862340000013022568391259568783_);">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M40,0H5C2.2,0,0,2.2,0,5v35c0,2.8,2.2,5,5,5h35c2.8,0,5-2.2,5-5V5C45,2.2,42.8,0,40,0z M13.6,38.8H6.9V17.1
h6.7V38.8z M10.2,14.2c-2.2,0-4-1.8-4-4s1.8-4,4-4c2.2,0,4,1.8,4,4S12.4,14.2,10.2,14.2z M38.8,38.8h-6.7V27.4
c0-3.1-1.2-4.9-3.7-4.9c-2.7,0-4.1,1.8-4.1,4.9v11.4h-6.4V17.1h6.4V20c0,0,1.9-3.6,6.5-3.6c4.6,0,7.9,2.8,7.9,8.6V38.8z"/>
</g>
</g></symbol>
<symbol id="amazon_dm" viewBox="0 0 45 45"><defs>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="amazon_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<g>
<rect id="amazon_dm_SVGID_00000093872422312005854910000000962687890768438402_" width="45" height="45"/>
<clipPath id="amazon_dm_SVGID_00000103248556473531316020000006347545801468702399_">
<use xlink:href="#amazon_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath><clipPath id="amazon_dm_SVGID_00000169531717617770325750000004330323237332989317_">
<use xlink:href="#amazon_dm_SVGID_00000093872422312005854910000000962687890768438402_" style="overflow:visible;"/>
</clipPath>
<rect id="apple_dm_SVGID_1_" y="0" width="45" height="45"/>
<clipPath id="apple_dm_SVGID_00000006667370234986338750000006430319485248344488_">
<use xlink:href="#apple_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="facebook_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="facebook_dm_SVGID_00000160911352011852748990000012412001075002997915_">
<use xlink:href="#facebook_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="google_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="google_dm_SVGID_00000157289140752715482350000007521226302924868282_">
<use xlink:href="#google_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="linkedin_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="linkedin_dm_SVGID_00000067207488217466862340000013022568391259568783_">
<use xlink:href="#linkedin_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="microsoft_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="microsoft_dm_SVGID_00000067227851144764912490000015670900565484668574_">
<use xlink:href="#microsoft_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="outlook_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="outlook_dm_SVGID_00000027577413913333259450000010373114094098190499_">
<use xlink:href="#outlook_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="paypal_dm_SVGID_1_" width="45" height="45"/>
<rect id="paypal_dm_SVGID_00000183242323167375670930000002421128438921142686_" width="45" height="45"/>
<clipPath id="paypal_dm_SVGID_00000028289222173765833380000004189814725540328076_">
<use xlink:href="#paypal_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath><clipPath id="paypal_dm_SVGID_00000057830829683723910860000009463646960710544536_">
<use xlink:href="#paypal_dm_SVGID_00000183242323167375670930000002421128438921142686_" style="overflow:visible;"/>
</clipPath>
<rect id="reddit_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="reddit_dm_SVGID_00000031168642836518867390000007570234273682262957_">
<use xlink:href="#reddit_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="tiktok_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="tiktok_dm_SVGID_00000168097799505604195400000002784558140406772116_">
<use xlink:href="#tiktok_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="x_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="x_dm_SVGID_00000078743550890106176290000000360767509830120849_">
<use xlink:href="#x_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect id="yahoo_dm_SVGID_1_" width="45" height="45"/>
<clipPath id="yahoo_dm_SVGID_00000096762850415739735390000017350860078463233711_">
<use xlink:href="#yahoo_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath></defs>
<symbol id="amazon_dm" viewBox="0 0 45 45"><g>
<g>
<path style="clip-path:url(#amazon_dm_SVGID_00000103248556473531316020000006347545801468702399_);fill:#FFFFFF;" d="M39,37
c-18.6,8.8-30.1,1.4-37.5-3c-0.5-0.3-1.2,0.1-0.6,0.8C3.4,37.8,11.4,45,22,45s16.8-5.7,17.6-6.7C40.3,37.3,39.8,36.7,39,37L39,37
L39,37z M44.2,34.2c-0.5-0.6-3-0.8-4.6-0.6s-4,1.2-3.8,1.8c0.1,0.2,0.3,0.1,1.4,0c1.1-0.1,4.2-0.5,4.8,0.3s-1,4.9-1.3,5.5
@@ -27,9 +67,7 @@
</g>
<g>
<clipPath id="amazon_dm_SVGID_00000169531717617770325750000004330323237332989317_">
<use xlink:href="#amazon_dm_SVGID_00000093872422312005854910000000962687890768438402_" style="overflow:visible;"/>
</clipPath>
<path style="clip-path:url(#amazon_dm_SVGID_00000169531717617770325750000004330323237332989317_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="
M26.5,19c0,2.3,0.1,4.3-1.1,6.3c-1,1.7-2.5,2.7-4.2,2.7c-2.3,0-3.6-1.7-3.6-4.3c0-5.1,4.5-6,8.9-6V19z M32.5,33.5
@@ -39,14 +77,10 @@
c0.4,0.5,0.5,1.2,0,1.6C35.8,30.6,33.7,32.5,32.5,33.5L32.5,33.5"/>
</g>
</g></symbol>
<symbol id="apple_dm" viewBox="0 0 45 45"><defs>
<rect id="apple_dm_SVGID_1_" y="0" width="45" height="45"/>
</defs><g>
<symbol id="apple_dm" viewBox="0 0 45 45"><g>
<g>
<clipPath id="apple_dm_SVGID_00000006667370234986338750000006430319485248344488_">
<use xlink:href="#apple_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#apple_dm_SVGID_00000006667370234986338750000006430319485248344488_);">
<g>
<path style="fill:#FFFFFF;" d="M28.8,7.2c-1.5,1.8-4.2,3.3-6.6,3c-0.3-2.4,0.9-5.1,2.4-6.9S29.1,0,31.2,0C31.5,2.7,30.3,5.4,28.8,7.2
@@ -57,27 +91,19 @@
</g>
</g>
</g></symbol>
<symbol id="facebook_dm" viewBox="0 0 45 45"><defs>
<rect id="facebook_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="facebook_dm" viewBox="0 0 45 45"><g>
<clipPath id="facebook_dm_SVGID_00000160911352011852748990000012412001075002997915_">
<use xlink:href="#facebook_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#facebook_dm_SVGID_00000160911352011852748990000012412001075002997915_);">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M45,22.5C45,10.1,35,0,22.5,0S0,10.1,0,22.5c0,11.2,8.2,20.5,19,22.2V29.1h-5.7v-6.5H19v-5
c0-5.6,3.4-8.8,8.5-8.8c2.5,0,5,0.4,5,0.4v5.5h-2.8c-2.8,0-3.7,1.7-3.7,3.5v4.2h6.2l-1,6.5h-5.2v15.7C36.8,43.1,45,33.8,45,22.5
L45,22.5z"/>
</g>
</g></symbol>
<symbol id="google_dm" viewBox="0 0 45 45"><defs>
<rect id="google_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="google_dm" viewBox="0 0 45 45"><g>
<g>
<clipPath id="google_dm_SVGID_00000157289140752715482350000007521226302924868282_">
<use xlink:href="#google_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#google_dm_SVGID_00000157289140752715482350000007521226302924868282_);">
<g>
<path style="fill:#FFFFFF;" d="M44.9,20.6c-0.1-0.9-0.2-1.8-0.4-2.7h-22v9.2H35c-0.7,1.8-1.7,3.4-3.1,4.8c-2.5,2.5-5.9,3.9-9.4,3.9
@@ -88,13 +114,18 @@
</g>
</g>
</g></symbol>
<symbol id="microsoft_dm" viewBox="0 0 45 45"><defs>
<rect id="microsoft_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="linkedin_dm" viewBox="0 0 45 45"><g>
<g style="clip-path:url(#linkedin_dm_SVGID_00000067207488217466862340000013022568391259568783_);">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M40,0H5C2.2,0,0,2.2,0,5v35c0,2.8,2.2,5,5,5h35c2.8,0,5-2.2,5-5V5C45,2.2,42.8,0,40,0z M13.6,38.8H6.9V17.1
h6.7V38.8z M10.2,14.2c-2.2,0-4-1.8-4-4s1.8-4,4-4c2.2,0,4,1.8,4,4S12.4,14.2,10.2,14.2z M38.8,38.8h-6.7V27.4
c0-3.1-1.2-4.9-3.7-4.9c-2.7,0-4.1,1.8-4.1,4.9v11.4h-6.4V17.1h6.4V20c0,0,1.9-3.6,6.5-3.6c4.6,0,7.9,2.8,7.9,8.6V38.8z"/>
</g>
</g></symbol>
<symbol id="microsoft_dm" viewBox="0 0 45 45"><g>
<clipPath id="microsoft_dm_SVGID_00000067227851144764912490000015670900565484668574_">
<use xlink:href="#microsoft_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#microsoft_dm_SVGID_00000067227851144764912490000015670900565484668574_);">
<path style="fill:#FFFFFF;" d="M0,0h21.4v21.4H0V0z"/>
<path style="fill:#FFFFFF;" d="M23.6,0H45v21.4H23.6V0z"/>
@@ -102,13 +133,9 @@
<path style="fill:#FFFFFF;" d="M23.6,23.6H45V45H23.6V23.6z"/>
</g>
</g></symbol>
<symbol id="outlook_dm" viewBox="0 0 45 45"><defs>
<rect id="outlook_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="outlook_dm" viewBox="0 0 45 45"><g>
<clipPath id="outlook_dm_SVGID_00000027577413913333259450000010373114094098190499_">
<use xlink:href="#outlook_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#outlook_dm_SVGID_00000027577413913333259450000010373114094098190499_);">
<path style="fill:#FFFFFF;" d="M14.8,20.4c0.2,0.7,0.3,1.4,0.3,2.1c0,0.8-0.1,1.5-0.4,2.2c0,0,0,0,0,0.1c-0.1,0.3-0.3,0.6-0.5,0.9
c-0.1,0.1-0.1,0.2-0.2,0.3c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1c-0.1,0.1-0.2,0.1-0.2,0.2c-0.2,0.2-0.5,0.3-0.8,0.4
@@ -136,35 +163,25 @@
c0.1,0,0.1,0.1,0.2,0.1l0.9,0.5v0l0,0l0,0l0.6,0.4l1.2,0.7l2.7,1.6L44.1,43L44.1,43L44.1,43z"/>
</g>
</g></symbol>
<symbol id="paypal_dm" viewBox="0 0 45 45"><defs>
<rect id="paypal_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="paypal_dm" viewBox="0 0 45 45"><g>
<g>
<clipPath id="paypal_dm_SVGID_00000028289222173765833380000004189814725540328076_">
<use xlink:href="#paypal_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path style="clip-path:url(#paypal_dm_SVGID_00000028289222173765833380000004189814725540328076_);fill:#FFFFFF;" d="M35.3,10.3L35.3,10.3
C35.4,4.7,30.8,0,24.4,0H10.8c-0.6,0-1.2,0.5-1.3,1.1L4.2,34.8c-0.1,0.6,0.4,1.2,1,1.2h7.9l2-12.4l0,0c0.1-0.6,0.6-1.1,1.3-1.1
h6.2c6.3,0,11.6-4.6,12.6-10.8C35.3,11.3,35.3,10.8,35.3,10.3L35.3,10.3L35.3,10.3z"/>
</g>
<g>
<clipPath id="paypal_dm_SVGID_00000057830829683723910860000009463646960710544536_">
<use xlink:href="#paypal_dm_SVGID_00000183242323167375670930000002421128438921142686_" style="overflow:visible;"/>
</clipPath>
<path style="clip-path:url(#paypal_dm_SVGID_00000057830829683723910860000009463646960710544536_);fill:#FFFFFF;" d="M38,12.3
c-1.2,7.6-7.7,13-15.3,13h-4.9l-2.1,13.5h-2.9l-0.8,5c-0.1,0.6,0.3,1.1,0.9,1.2c0.1,0,0.1,0,0.2,0h6.8c0.6,0,1.2-0.5,1.3-1.1
L23,32.6c0.1-0.6,0.6-1.1,1.3-1.1h4c6.3,0,11.6-4.6,12.6-10.8C41.2,17.5,40.1,14.5,38,12.3L38,12.3z"/>
</g>
</g></symbol>
<symbol id="reddit_dm" viewBox="0 0 45 45"><defs>
<rect id="reddit_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="reddit_dm" viewBox="0 0 45 45"><g>
<clipPath id="reddit_dm_SVGID_00000031168642836518867390000007570234273682262957_">
<use xlink:href="#reddit_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#reddit_dm_SVGID_00000031168642836518867390000007570234273682262957_);">
<path style="fill:#FFFFFF;" d="M17.3,27C16,27,15,26,15,24.8c0-1.2,1-2.2,2.2-2.2s2.2,1,2.2,2.2C19.5,26,18.5,27,17.3,27z"/>
<path style="fill:#FFFFFF;" d="M28.1,30.1c0.2,0.2,0.2,0.6,0,0.9v-0.1c-1.6,1.2-3.6,1.8-5.6,1.7c-2,0.1-4-0.5-5.6-1.7
@@ -177,13 +194,9 @@
c0.6-0.6,1.3-0.9,2.2-0.9c1.8-0.1,3.3,1.4,3.4,3.2C37.5,23.8,36.8,24.9,35.7,25.5z"/>
</g>
</g></symbol>
<symbol id="tiktok_dm" viewBox="0 0 45 45"><defs>
<rect id="tiktok_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="tiktok_dm" viewBox="0 0 45 45"><g>
<clipPath id="tiktok_dm_SVGID_00000168097799505604195400000002784558140406772116_">
<use xlink:href="#tiktok_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#tiktok_dm_SVGID_00000168097799505604195400000002784558140406772116_);">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M34.8,0H10.2C4.6,0,0,4.6,0,10.2v24.6C0,40.4,4.6,45,10.2,45h24.6C40.4,45,45,40.4,45,34.8V10.2
C45,4.6,40.4,0,34.8,0z M34.7,20.7c-2.4,0-4.5-0.8-6.3-2v9.3c0,4.6-3.8,8.4-8.4,8.4c-2.4,0-4.5-1-6-2.5c-1.5-1.5-2.4-3.6-2.4-5.9
@@ -194,27 +207,19 @@
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;" d="M0,0L0,0z"/>
</g>
</g></symbol>
<symbol id="x_dm" viewBox="0 0 45 45"><defs>
<rect id="x_dm_SVGID_1_" width="45" height="45"/>
</defs><sodipodi:namedview bordercolor="#000000" borderopacity="0.25" id="namedview1" inkscape:current-layer="svg1" inkscape:cx="416.63652" inkscape:cy="374.42225" inkscape:deskcolor="#d1d1d1" inkscape:pagecheckerboard="0" inkscape:pageopacity="0.0" inkscape:showpageshadow="2" inkscape:window-height="730" inkscape:window-maximized="1" inkscape:window-width="1280" inkscape:window-x="0" inkscape:window-y="0" inkscape:zoom="0.27241971" pagecolor="#ffffff">
<inkscape:page bleed="0" height="799.33301" id="page2" margin="0" width="1440" x="0" y="0"></inkscape:page>
<symbol id="x_dm" viewBox="0 0 45 45"><sodipodi:namedview bordercolor="#000000" borderopacity="0.25" id="x_dm_namedview1" inkscape:current-layer="svg1" inkscape:cx="416.63652" inkscape:cy="374.42225" inkscape:deskcolor="#d1d1d1" inkscape:pagecheckerboard="0" inkscape:pageopacity="0.0" inkscape:showpageshadow="2" inkscape:window-height="730" inkscape:window-maximized="1" inkscape:window-width="1280" inkscape:window-x="0" inkscape:window-y="0" inkscape:zoom="0.27241971" pagecolor="#ffffff">
<inkscape:page bleed="0" height="799.33301" id="x_dm_page2" margin="0" width="1440" x="0" y="0"></inkscape:page>
</sodipodi:namedview>
<g>
<clipPath id="x_dm_SVGID_00000078743550890106176290000000360767509830120849_">
<use xlink:href="#x_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path id="path1-93" style="clip-path:url(#x_dm_SVGID_00000078743550890106176290000000360767509830120849_);fill:#FFFFFF;" d="
<path id="x_dm_path1-93" style="clip-path:url(#x_dm_SVGID_00000078743550890106176290000000360767509830120849_);fill:#FFFFFF;" d="
M35.6,2.2h6.9L27.3,19.4L45,42.8H31.1L20.2,28.6L7.8,42.8H0.9l16-18.4L0,2.2h14.2l9.8,13L35.6,2.2z M33.1,38.8H37L12.2,6.1H8.1
L33.1,38.8z"/>
</g></symbol>
<symbol id="yahoo_dm" viewBox="0 0 45 45"><defs>
<rect id="yahoo_dm_SVGID_1_" width="45" height="45"/>
</defs><g>
<symbol id="yahoo_dm" viewBox="0 0 45 45"><g>
<clipPath id="yahoo_dm_SVGID_00000096762850415739735390000017350860078463233711_">
<use xlink:href="#yahoo_dm_SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path style="clip-path:url(#yahoo_dm_SVGID_00000096762850415739735390000017350860078463233711_);fill:#FFFFFF;" d="M0,12.2h8.6l5,12.8
l5.1-12.8H27L14.4,42.5H6l3.4-8L0,12.2L0,12.2z M36.7,22.5h-9.4l8.3-20l9.3,0L36.7,22.5L36.7,22.5z M29.8,24.4
c2.9,0,5.2,2.3,5.2,5.2c0,2.9-2.3,5.2-5.2,5.2c-2.9,0-5.2-2.3-5.2-5.2C24.6,26.7,26.9,24.4,29.8,24.4L29.8,24.4z"/>

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB