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

🔨 Bug fixes, new svgs & new improvements

Browse Source
This commit is contained in:
pheralb 2022-04-22 15:13:38 +01:00
parent 5542cf499c
commit f54800f32c
18 changed files with 198 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/card/index.js
View File

@ -19,6 +19,7 @@ const Index = ({ title, url, href }) => {
const toastBg = useColorModeValue("#F2F2F2", "#1D1D1D");
const toastColor = useColorModeValue("black", "white");
const bgImage = useColorModeValue("transparent", "#E9E9E9");
const borderRds = useColorModeValue("0", "15px");
const downloadSvg = (url) => {
toast(`Downloading ${title}...`, {
@ -41,9 +42,17 @@ const Index = ({ title, url, href }) => {
_hover={{
shadow: "md",
}}
transition="all 0.2s"
>
<Center>
<Image src={href} alt={title} boxSize="45px" bg={bgImage} borderRadius="15px" p="1" />
<Image
src={href}
alt={title}
boxSize="45px"
bg={bgImage}
borderRadius={borderRds}
p="1"
/>
</Center>
<Text mt="2" fontWeight="light" textAlign="center">
{title}

9
components/categories/index.js
View File

@ -1,9 +0,0 @@
import React from 'react'
const Index = () => {
return (
<div>Index</div>
)
}
export default Index

32
components/items/libraries.js Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import useSWR from "swr";
import Grid from "components/grid";
import Library from "components/card/library";
import Loader from "animations/loader";
const fetcher = (url) => fetch(url).then((res) => res.json());
const Libraries = () => {
const { data, error } = useSWR("/api/icons", fetcher);
if (error) return <div>failed to load</div>;
if (!data) return <Loader />;
return (
<>
<Grid>
{data.map((link) => (
<>
<div key={link}>
<Library
image={link.image}
title={link.title}
url={link.url}
/>
</div>
</>
))}
</Grid>
</>
);
};
export default Libraries;

46
components/search/index.js
View File

@ -1,6 +1,5 @@
import { useMemo, useRef, useState } from "react";
import { createAutocomplete } from "@algolia/autocomplete-core";
import Link from "next/link";
import {
Box,
Input,
@ -11,33 +10,42 @@ import {
Text,
Image,
Icon,
Link,
} from "@chakra-ui/react";
import { IoSearch } from "react-icons/io5";
import { FiExternalLink } from "react-icons/fi";
import { Algolia } from "components/svg";
import NextLink from "next/link";
const AutocompleteItem = ({ id, title, href, url }) => {
return (
<>
<Link href={`/svg/${id}`} passHref>
<Box
id={id}
w="100%"
borderWidth="1px"
borderRadius="6px"
mt="3"
cursor="pointer"
_hover={{ shadow: "sm" }}
<NextLink href={`/svg/${id}`} passHref>
<Link
href={`/svg/${id}`}
style={{ textDecoration: "none" }}
_focus={{ outline: "0" }}
>
<HStack py={6} px={6} spacing={2}>
<Image src={href} alt={title} boxSize="20px" mr="2" />
<Text fontSize="18px" fontWeight="light">
{title}
</Text>
<Icon as={FiExternalLink} />
</HStack>
</Box>
</Link>
<Box
id={id}
w="100%"
borderWidth="1px"
borderRadius="6px"
mt="3"
cursor="pointer"
_hover={{ shadow: "md" }}
transition="all 0.2s"
>
<HStack py={6} px={6} spacing={2}>
<Image src={href} alt={title} boxSize="20px" mr="2" />
<Text fontSize="18px" fontWeight="light">
{title}
</Text>
<Icon as={FiExternalLink} />
</HStack>
</Box>
</Link>
</NextLink>
</>
);
};

23
components/sidebar/by.js
View File

@ -1,18 +1,23 @@
import React from "react";
import { Center, useColorModeValue, VStack } from "@chakra-ui/react";
import Link from "next/link";
import {
Icon,
Link,
Center,
useColorModeValue,
HStack,
} from "@chakra-ui/react";
import { IoRocketOutline } from "react-icons/io5";
const Index = () => {
const color = useColorModeValue("gray.400", "gray.600");
return (
<>
<Center color={color}>
<VStack>
<Link href="https://github.com/pheralb" passHref>
Built by Pablo Hdez
</Link>
</VStack>
</Center>
<HStack color={color} ml="6" spacing="3">
<Icon boxSize="6" as={IoRocketOutline} />
<Link href="https://github.com/pheralb" isExternal="true">
Built by Pablo
</Link>
</HStack>
</>
);
};

13
components/sidebar/index.js
View File

@ -11,6 +11,7 @@ import {
IconButton,
useColorModeValue,
useDisclosure,
Link,
} from "@chakra-ui/react";
import NextLink from "next/link";
import { IoApps } from "react-icons/io5";
@ -50,9 +51,15 @@ export default function Index({ children }) {
<Flex direction="column" as="nav" aria-label="Main Navigation">
{SidebarLinks.map((link) => (
<NextLink key={link.id} href={link.href} passHref>
<Item icon={link.icon} external={link.external}>
{link.title}
</Item>
<Link
href={link.href}
isExternal={link.external}
style={{ textDecoration: "none" }}
>
<Item icon={link.icon} href={link.href} external={link.external}>
{link.title}
</Item>
</Link>
</NextLink>
))}
<ModalSearch />

6
components/sidebar/links.js
View File

@ -1,5 +1,5 @@
import { IoAppsOutline, IoLogoGithub } from 'react-icons/io5';
import { FiTwitter } from 'react-icons/fi';
import { IoAppsOutline, IoLogoGithub, IoBookOutline } from "react-icons/io5";
import { FiTwitter } from "react-icons/fi";
const SidebarLinks = [
{
@ -22,7 +22,7 @@ const SidebarLinks = [
external: true,
title: "Twitter",
icon: FiTwitter,
}
},
];
export default SidebarLinks;

32
data/icons.js → data/svgs.js
View File

@ -1,4 +1,4 @@
const Icons = [
const SVGSLogos = [
{
id: 1,
href: "/library/discord.svg",
@ -313,7 +313,35 @@ const Icons = [
title: "WhatsApp",
category: "Social",
url: "https://web.whatsapp.com/",
},
{
id: 46,
href: "/library/headlessui.svg",
title: "Headless UI",
category: "Design",
url: "https://headlessui.dev/",
},
{
id: 47,
href: "/library/kotlin.svg",
title: "Kotlin",
category: "Java",
url: "https://kotlinlang.org/",
},
{
id: 48,
href: "/library/tiktok.svg",
title: "TikTok",
category: "Video Platform",
url: "https://tiktok.com/",
},
{
id: 49,
href: "/library/storybook.svg",
title: "Storybook",
category: "UI component explorer",
url: "https://storybook.js.org/",
}
];
export default Icons;
export default SVGSLogos;

2
pages/api/all.js
View File

@ -1,4 +1,4 @@
import db from "data/icons";
import db from "data/svgs";
// 📦 Show all content ->
export default function handler(req, res) {

2
pages/api/categories.js
View File

@ -1,4 +1,4 @@
import db from "data/icons";
import db from "data/svgs";
// 📦 Show categories ->
export default function handler(req, res) {

2
pages/api/search.js
View File

@ -1,4 +1,4 @@
import db from "data/icons";
import db from "data/svgs";
export default function handler(req, res) {
const { id, q, c } = req.query;

16
pages/svg/[id].js
View File

@ -7,6 +7,7 @@ import {
Button,
Image,
Center,
Link,
useColorModeValue,
} from "@chakra-ui/react";
import { useRouter } from "next/router";
@ -14,11 +15,11 @@ import useSWR from "swr";
import Error from "components/error";
import { IoArrowBackOutline, IoCloudDownloadOutline } from "react-icons/io5";
import { BiLinkExternal } from "react-icons/bi";
import Link from "next/link";
import Show from "animations/show";
import Loader from "animations/loader";
import confetti from "canvas-confetti";
import download from "downloadjs";
import NextLink from 'next/link';
const fetcher = async (url) => {
const res = await fetch(url);
@ -36,6 +37,7 @@ export default function Icon() {
fetcher
);
const bgImage = useColorModeValue("transparent", "#E9E9E9");
const borderRds = useColorModeValue("0", "15px");
if (error) return <Error />;
if (!data) return <Loader />;
@ -57,7 +59,7 @@ export default function Icon() {
<title>{data.title} - SVGL</title>
</Head>
<Show delay="0">
<Link href="/" passHref>
<NextLink href="/" passHref>
<Button
leftIcon={<IoArrowBackOutline />}
fontWeight="light"
@ -66,7 +68,7 @@ export default function Icon() {
>
Continue discovering
</Button>
</Link>
</NextLink>
<SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} spacing={0}>
<Box py={{ base: "10", md: "24" }}>
<Center>
@ -77,7 +79,7 @@ export default function Icon() {
fit="cover"
loading="lazy"
bg={bgImage}
borderRadius="15px"
borderRadius={borderRds}
p="1"
/>
</Center>
@ -109,7 +111,11 @@ export default function Icon() {
>
Download .svg
</Button>
<Link href={data.url} passHref>
<Link
href={data.url}
style={{ textDecoration: "none" }}
isExternal
>
<Button
w={{ base: "100%", md: "auto" }}
fontWeight="light"

18
public/library/headlessui.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<title>Headless UI</title>
<defs>
<linearGradient x1="35.8706002%" y1="7.22395026%" x2="60.3143692%" y2="115.987925%" id="linearGradient-1">
<stop stop-color="#66E3FF" offset="0%"></stop>
<stop stop-color="#7064F9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="39.1716101%" y1="-0.000258114803%" x2="55.0500969%" y2="99.1811839%" id="linearGradient-2">
<stop stop-color="#66E3FF" offset="0%"></stop>
<stop stop-color="#7064F9" offset="100%"></stop>
</linearGradient>
</defs>
<g>
<path d="M50.6986759,159.08871 L206.923729,106.936393 C203.80243,87.4132795 201.577503,74.3711999 199.00043,64.4176124 C196.223274,53.7119051 194.022357,50.8474482 193.157997,49.8552901 C190.14581,46.4084468 186.395385,43.6845493 182.185428,41.8860191 C180.968922,41.3659363 177.559502,40.1577436 166.53091,40.8218494 C154.86205,41.5259618 139.543672,43.9103419 115.28557,47.7509546 C91.0354724,51.591567 75.7250972,54.0639613 64.4163882,56.9924283 C53.7159324,59.7688711 50.8427359,61.9772231 49.8503228,62.8413611 C46.4088895,65.857842 43.6877564,69.6024394 41.8870066,73.8111103 C41.3667899,75.0273045 40.1582869,78.4358481 40.8225634,89.4696076 C41.5268568,101.135468 43.9118497,116.457912 47.7534494,140.709779 C48.8258961,147.510864 49.7942992,153.591833 50.6986759,159.08871 L50.6986759,159.08871 Z" id="Path" fill="url(#linearGradient-1)"></path>
<path d="M7.62473955,147.062792 C0.197646837,100.14331 -3.52390284,76.6835685 4.52744981,57.8485649 C8.72454124,48.0252484 15.0819292,39.2737796 23.1271949,32.2444815 C38.549617,18.778334 62.0073849,15.065742 108.922921,7.63255653 C155.854464,0.191369851 179.312232,-3.52122222 198.16008,4.52806145 C207.980567,8.72542915 216.728782,15.0811604 223.754738,23.1230269 C237.23235,38.5494871 240.945896,62.0092284 248.372989,108.936712 C255.808085,155.856195 259.521632,179.323937 251.470279,198.15094 C247.275985,207.973747 240.921308,216.72525 232.878537,223.755023 C217.456115,237.229172 193.990344,240.941764 147.066804,248.374949 C100.151269,255.808135 76.6854971,259.520727 57.8536554,251.471443 C48.0333048,247.273835 39.2851393,240.91814 32.2589976,232.876477 C18.7813853,217.450017 15.0678389,193.990276 7.63274287,147.062792 L7.62473955,147.062792 Z M90.3872026,230.388081 C102.952435,229.62796 119.135174,227.091555 143.089148,223.29895 C167.051126,219.506345 183.209855,216.913932 195.406934,213.753428 C207.211849,210.688939 212.654116,207.704463 216.167578,204.631973 C221.336653,200.112766 225.420781,194.487252 228.116554,188.173349 C229.957321,183.884665 231.117804,177.787692 230.381497,165.60975 C229.621181,153.047747 227.084124,136.861165 223.290544,112.905345 C219.496965,88.9495246 216.911889,72.7789457 213.750572,60.5930026 C210.685296,48.7831189 207.692049,43.3422514 204.626773,39.8296913 C200.109733,34.6598101 194.485483,30.5739786 188.171921,27.8757849 C183.882135,26.0354914 177.783595,24.8753064 165.602523,25.6114238 C153.037291,26.371545 136.862555,28.9079495 112.900577,32.7005543 C88.9466028,36.5011605 72.7798707,39.0855725 60.590795,42.2460764 C48.7778761,45.3105653 43.3436133,48.3030424 39.8301503,51.3675312 C34.6583762,55.8860779 30.5715011,61.5116077 27.8731712,67.8261559 C26.040408,72.1148399 24.8799248,78.2118123 25.6162313,90.3897542 C26.376548,102.959759 28.9056012,119.138339 32.707184,143.094159 C36.5007639,167.04998 39.0858402,183.220558 42.2471565,195.406502 C45.3124331,207.216385 48.2976761,212.657253 51.3709559,216.169813 C55.8881822,221.33949 61.5123817,225.425286 67.8258079,228.12372 C72.1155942,229.964013 78.2061302,231.124198 90.3952059,230.388081 L90.3872026,230.388081 Z" id="Shape" fill="url(#linearGradient-2)"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

14
public/library/kotlin.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<title>Kotlin</title>
<defs>
<linearGradient x1="99.9909179%" y1="-0.0107311249%" x2="0.00995772309%" y2="100.010253%" id="linearGradient-1">
<stop stop-color="#E44857" offset="0.3435144%"></stop>
<stop stop-color="#C711E1" offset="46.89%"></stop>
<stop stop-color="#7F52FF" offset="100%"></stop>
</linearGradient>
</defs>
<g>
<polygon fill="url(#linearGradient-1)" fill-rule="nonzero" points="256 256 0 256 0 0 256 0 128 127.948759"></polygon>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

13
public/library/storybook.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="319px" viewBox="0 0 256 319" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<path d="M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z" id="path-1"></path>
</defs>
<g>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use fill="#FF4785" fill-rule="nonzero" xlink:href="#path-1"></use>
<path d="M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

9
public/library/tiktok.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="290px" viewBox="0 0 256 290" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<title>TikTok</title>
<g>
<path d="M189.720224,104.421475 C208.398189,117.766281 231.279538,125.618095 255.992548,125.618095 L255.992548,78.0872726 C251.315611,78.0882654 246.650588,77.6008156 242.074913,76.6318726 L242.074913,114.045382 C217.363889,114.045382 194.485518,106.193568 175.80259,92.8497541 L175.80259,189.846306 C175.80259,238.368905 136.447224,277.701437 87.902784,277.701437 C69.7897057,277.701437 52.9543216,272.228299 38.9691786,262.841664 C54.9309256,279.153859 77.1908018,289.273158 101.81744,289.273158 C150.364858,289.273158 189.72221,249.940626 189.72221,201.416041 L189.72221,104.421475 L189.720224,104.421475 Z M206.889179,56.4687254 C197.343701,46.0456391 191.076347,32.5757434 189.720224,17.6842019 L189.720224,11.5707278 L176.531282,11.5707278 C179.851103,30.497877 191.174632,46.6681056 206.889179,56.4687254 L206.889179,56.4687254 Z M69.6735517,225.606854 C64.3403943,218.617757 61.4583846,210.068027 61.4712906,201.277053 C61.4712906,179.084685 79.472186,161.090739 101.680438,161.090739 C105.819294,161.089747 109.933331,161.723134 113.877603,162.974023 L113.877603,114.380938 C109.268175,113.749536 104.616057,113.481488 99.9659254,113.579773 L99.9659254,151.402303 C96.0186741,150.151413 91.9026521,149.516041 87.7628035,149.520012 C65.5545513,149.520012 47.5546487,167.511972 47.5546487,189.707318 C47.5546487,205.401018 56.552118,218.98806 69.6735517,225.606854 Z" fill="#FF004F"></path>
<path d="M175.80259,92.8487613 C194.485518,106.192575 217.363889,114.044389 242.074913,114.044389 L242.074913,76.6308799 C228.281375,73.6942679 216.070311,66.4897401 206.889179,56.4687254 C191.173639,46.6671128 179.851103,30.4968842 176.531282,11.5707278 L141.8876,11.5707278 L141.8876,201.414056 C141.809172,223.545865 123.839052,241.466346 101.678453,241.466346 C88.6195635,241.466346 77.0180599,235.24466 69.6705734,225.606854 C56.5501325,218.98806 47.5526631,205.400025 47.5526631,189.708311 C47.5526631,167.51495 65.5525657,149.521004 87.760818,149.521004 C92.0158278,149.521004 96.1169583,150.183182 99.9639399,151.403295 L99.9639399,113.580765 C52.272289,114.565593 13.9166419,153.513923 13.9166419,201.415048 C13.9166419,225.326893 23.4680767,247.004014 38.9701714,262.842657 C52.9553144,272.228299 69.7906985,277.70243 87.9037768,277.70243 C136.449209,277.70243 175.803582,238.367912 175.803582,189.846306 L175.803582,92.8487613 L175.80259,92.8487613 Z" fill="#000000"></path>
<path d="M242.074913,76.6308799 L242.074913,66.5145593 C229.636505,66.5334219 217.442318,63.0517795 206.889179,56.4677326 C216.231139,66.6902795 228.532545,73.7389425 242.074913,76.6308799 Z M176.531282,11.5707278 C176.214589,9.76190185 175.971361,7.9411627 175.80259,6.11347418 L175.80259,0 L127.968973,0 L127.968973,189.845313 C127.89253,211.974144 109.923403,229.894625 87.760818,229.894625 C81.2542071,229.894625 75.1109499,228.350869 69.6705734,225.607847 C77.0180599,235.24466 88.6195635,241.465353 101.678453,241.465353 C123.837066,241.465353 141.810164,223.546857 141.8876,201.415048 L141.8876,11.5707278 L176.531282,11.5707278 Z M99.9659254,113.580765 L99.9659254,102.811203 C95.9690357,102.265179 91.9393845,101.991175 87.9047695,101.99315 C39.3553659,101.99315 0,141.326686 0,189.845313 C0,220.263769 15.4673478,247.071522 38.9711641,262.840672 C23.4690694,247.003021 13.9176347,225.324907 13.9176347,201.414056 C13.9176347,153.513923 52.272289,114.565593 99.9659254,113.580765 Z" fill="#00F2EA"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

3
styles/globals.css
View File

@ -6,3 +6,6 @@
font-display: swap;
}
a:focus {
outline: none;
}

2
styles/theme.js
View File

@ -33,7 +33,7 @@ const theme = extendTheme(
},
fonts: {
body: "Inter-Medium, sans-serif",
heading: "Poppins-Regular, sans-serif",
heading: "Inter-Medium, sans-serif",
},
styles: {
global: (props) => ({