qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-09-20 11:16:19 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #57 from pheralb/dev

Browse Source 
🚀 v3.2.2
This commit is contained in:
Pablo Hdez 2023-11-14 10:52:05 +00:00 committed by GitHub
commit 51809f10e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 124 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -9,15 +9,15 @@
<a href="https://svgl.vercel.app/" target="_blank">
Discover
</a>
<span>&nbsp;●&nbsp;</span>
<span>&nbsp;⁘&nbsp;</span>
<a href="#-getting-started">
Submit logo
</a>
<span>&nbsp;●&nbsp;</span>
<span>&nbsp;⁘&nbsp;</span>
<a href="#%EF%B8%8F-stack">
Stack
</a>
<span>&nbsp;●&nbsp;</span>
<span>&nbsp;⁘&nbsp;</span>
<a href="#%EF%B8%8F-contributing">
Contributing
</a>
@ -27,12 +27,13 @@
<div align="center">
![Svelte Badge](https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=fff&style=flat)
[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fpheralb%2Fsvgl%2Fbadge%3Fref%3Dmain&style=flat)](https://actions-badge.atrox.dev/pheralb/svgl/goto?ref=main)
![GitHub stars](https://img.shields.io/github/stars/pheralb/svgl)
![GitHub issues](https://img.shields.io/github/issues/pheralb/svgl)
![GitHub forks](https://img.shields.io/github/forks/pheralb/svgl)
![GitHub license](https://img.shields.io/github/license/pheralb/svgl)
![GitHub PRs](https://img.shields.io/github/issues-pr/pheralb/svgl)
![Tailwind CSS Badge](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff&style=flat)
</div>
@ -43,6 +44,7 @@
- [**Tailwindcss**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
- [**Prettier**](https://prettier.io/) + [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - An opinionated code formatter.
- [**phosphor-svelte**](https://github.com/haruaki07/phosphor-svelte) - A clean and friendly icon family for Svelte.
- [**svelte-sonner**](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte.
- [**Vitest**](https://vitest.dev/) - Blazing Fast Unit Test Framework.
## 🚀 Getting Started

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "svgl",
"author": "@pheralb_",
"version": "3.2.1",
"version": "3.2.2",
"description": "A beautiful library with SVG logos.",
"private": true,
"license": "MIT",

55
src/components/cardSpotlight.svelte Normal file
View File

@ -0,0 +1,55 @@
<script lang="ts">
let div: HTMLDivElement;
let focused = false;
let position = { x: 0, y: 0 };
let opacity = 0;
const handleMouseMove = (e: MouseEvent) => {
if (!div || focused) return;
const rect = div.getBoundingClientRect();
position = {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
};
const handleFocus = () => {
focused = true;
opacity = 1;
};
const handleBlur = () => {
focused = false;
opacity = 0;
};
const handleMouseEnter = () => {
opacity = 1;
};
const handleMouseLeave = () => {
opacity = 0;
};
</script>
<div
aria-hidden="true"
bind:this={div}
on:mousemove={handleMouseMove}
on:focus={handleFocus}
on:blur={handleBlur}
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800/20"
>
<div
class="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
style={`
opacity: ${opacity};
background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
`}
/>
<slot />
</div>

79
src/components/svgCard.svelte
View File

@ -9,6 +9,7 @@
import Copy from 'phosphor-svelte/lib/Copy';
import Link from 'phosphor-svelte/lib/Link';
import Star from 'phosphor-svelte/lib/Star';
import CardSpotlight from './cardSpotlight.svelte';
// Props:
export let svgInfo: iSVG;
@ -38,43 +39,43 @@
};
</script>
<div
class="flex flex-col items-center justify-center rounded-md border border-neutral-300 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-700/10"
>
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
<div class="mb-3 flex flex-col items-center justify-center">
<p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
<a
href={`/directory/${svgInfo.category.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
>
<CardSpotlight>
<div class="flex flex-col items-center justify-center rounded-md p-4">
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
<div class="mb-3 flex flex-col items-center justify-center">
<p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
<a
href={`/directory/${svgInfo.category.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
>
</div>
<div class="flex items-center space-x-1">
<button
title="Copy to clipboard"
on:click={() => {
copyToClipboard(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<Copy size={17} />
</button>
<button
title="Download"
on:click={() => {
downloadSvg(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<DownloadSimple size={17} />
</button>
<a
href={svgInfo.url}
title="Website"
target="_blank"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<Link size={17} />
</a>
</div>
</div>
<div class="flex items-center space-x-1">
<button
title="Copy to clipboard"
on:click={() => {
copyToClipboard(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<Copy size={17} />
</button>
<button
title="Download"
on:click={() => {
downloadSvg(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<DownloadSimple size={17} />
</button>
<a
href={svgInfo.url}
title="Website"
target="_blank"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<Link size={17} />
</a>
</div>
</div>
</CardSpotlight>

7
src/data/svgs.ts
View File

@ -1498,5 +1498,12 @@ export const svgs: iSVG[] = [
category: 'Crypto',
route: '/library/matic.svg',
url: 'https://polygon.technology/'
},
{
id: 215,
title: 'X',
category: 'Social',
route: '/library/x.svg',
url: 'https://x.com'
}
];

21
src/routes/+layout.svelte
View File

@ -16,6 +16,8 @@
import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
import ArrowLeft from 'phosphor-svelte/lib/ArrowLeft';
import Star from 'phosphor-svelte/lib/Star';
import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
import Box from 'phosphor-svelte/lib/Cube';
// Toaster:
import { Toaster } from 'svelte-sonner';
@ -38,7 +40,7 @@
class="flex items-center space-x-2 duration-150 hover:text-neutral-500 dark:hover:text-neutral-300"
>
<h3 class="text-xl font-medium">svgl</h3>
<p class="text-neutral-500">v3.2.1</p>
<p class="text-neutral-500">v3.2.2</p>
</div>
</a>
<Theme />
@ -50,18 +52,21 @@
>
<a
href="/"
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
${data.pathname === `/` ? 'bg-neutral-200 dark:bg-neutral-700/30' : ''}`}
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 ${
data.pathname === `/`
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
: ''
}`}
data-sveltekit-preload-data>All</a
>
<!-- Order alfabetically: -->
{#each categories.sort() as category}
<a
href={`/directory/${category.toLowerCase()}`}
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
${
data.pathname === `/directory/${category.toLowerCase()}`
? 'bg-neutral-200 dark:bg-neutral-700/30'
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
: ''
}`}
data-sveltekit-preload-data>{category}</a
@ -76,8 +81,9 @@
target="_blank"
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<div><Box size={18} /></div>
<span>Submit logo</span>
<div><ArrowUpRight size={16} /></div>
<div><ArrowUpRight size={12} /></div>
</a>
<a
href="https://github.com/pheralb/svgl"
@ -85,6 +91,7 @@
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<div class="flex items-center space-x-2">
<div><GithubLogo size={18} /></div>
<span class="flex items-center justify-center">Repository</span>
{#if data.stars}
<div class="flex items-center space-x-1 text-neutral-600 dark:text-neutral-400">
@ -94,7 +101,7 @@
<span>{data.stars}</span>
</div>
{/if}
<div><ArrowUpRight size={16} /></div>
<div><ArrowUpRight size={12} /></div>
</div>
</a>
</div>

1
static/library/x.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1227" fill="none" viewBox="0 0 1200 1227"><path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 417 B