sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 09:31:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Add PNG download functionality for SVG logos and enhance logo action buttons

Browse Source
This commit is contained in:
sHa
2025-04-28 12:33:16 +03:00
parent 8cf977a791
commit 9e9b0c5648
3 changed files with 168 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/LogoGrid.svelte
View File

@@ -16,6 +16,38 @@
function closeModal() {
showModal = false;
}
function downloadPng(logo) {
// Only for SVG
if (logo.format !== 'SVG') return;
fetch(logo.path)
.then(res => res.text())
.then(svgText => {
const svg = new Blob([svgText], { type: 'image/svg+xml' });
const url = URL.createObjectURL(svg);
const img = new window.Image();
img.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
};
img.onerror = function () {
alert('Failed to convert SVG to PNG.');
};
img.src = url;
});
}
</script>
<LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
@@ -40,9 +72,16 @@
<button class="copy-btn" on:click={() => onCopy(logo.path)}>
Copy URL
</button>
<button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
Download
</button>
<span class="download-group">
<button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
Download
</button>
{#if logo.format === 'SVG'}
<button class="download-btn png-btn" on:click={() => downloadPng(logo)}>
PNG
</button>
{/if}
</span>
</div>
</div>
</div>
@@ -59,6 +98,7 @@
border-radius: 8px;
overflow: hidden;
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
min-width: 320px;
}
:global(.logo-card:hover) {
transform: translateY(-5px);
@@ -66,11 +106,11 @@
}
.logo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.logo-image {
height: 160px;
height: 260px;
width: 100%;
display: flex;
align-items: center;
@@ -109,6 +149,53 @@
}
.logo-actions {
display: flex;
align-items: center;
gap: 0.5em;
flex-wrap: nowrap;
}
.download-group {
display: inline-flex;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.download-group .download-btn {
background: #27ae60;
color: #fff;
font-weight: 500;
letter-spacing: 0.02em;
min-width: 4em;
border-right: 1px solid var(--color-border);
border-radius: 0;
margin: 0;
padding: 0.4em 1em;
font-size: 0.95em;
transition: background 0.2s, color 0.2s;
}
.download-group .download-btn:focus,
.download-group .download-btn:hover {
background: #219150;
color: #fff;
outline: none;
}
.download-group .png-btn {
background: #27ae60;
color: #fff;
font-weight: 500;
letter-spacing: 0.02em;
min-width: 2.5em;
border-radius: 0;
margin: 0;
padding: 0.4em 1em;
font-size: 0.95em;
border-right: none;
transition: background 0.2s, color 0.2s;
}
.download-group .png-btn:focus,
.download-group .png-btn:hover {
background: #219150;
color: #fff;
outline: none;
}
.no-results {
grid-column: 1 / -1;

79
src/components/LogoList.svelte
View File

@@ -16,6 +16,38 @@
function closeModal() {
showModal = false;
}
function downloadPng(logo) {
// Only for SVG
if (logo.format !== 'SVG') return;
fetch(logo.path)
.then(res => res.text())
.then(svgText => {
const svg = new Blob([svgText], { type: 'image/svg+xml' });
const url = URL.createObjectURL(svg);
const img = new window.Image();
img.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
};
img.onerror = function () {
alert('Failed to convert SVG to PNG.');
};
img.src = url;
});
}
</script>
<LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
@@ -41,9 +73,16 @@
<button class="copy-btn" on:click={() => onCopy(logo.path)}>
Copy URL
</button>
<button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
Download
</button>
<span class="download-group">
<button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
Download
</button>
{#if logo.format === 'SVG'}
<button class="download-btn png-btn" on:click={() => downloadPng(logo)}>
PNG
</button>
{/if}
</span>
</div>
</div>
{:else}
@@ -103,8 +142,40 @@
}
.logo-actions {
display: flex;
align-items: center;
gap: 0.5em;
}
.download-group {
display: inline-flex;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.download-group button,
.download-group .png-btn {
background: #27ae60;
color: #fff;
font-weight: 500;
letter-spacing: 0.02em;
min-width: 2.5em;
border-radius: 0;
margin: 0;
padding: 0.4em 1em;
font-size: 0.95em;
border-right: 1px solid var(--color-border);
transition: background 0.2s, color 0.2s;
}
.download-group button:last-child {
border-right: none;
}
.download-group button:focus,
.download-group button:hover,
.download-group .png-btn:focus,
.download-group .png-btn:hover {
background: #219150;
color: #fff;
outline: none;
}
.logo-list {
display: flex;
flex-direction: column;