diff --git a/package-lock.json b/package-lock.json index 90bdba0..e900ec3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,8 @@ "@chakra-ui/react": "^1.8.6", "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", + "canvas-confetti": "^1.5.1", + "downloadjs": "^1.4.7", "framer-motion": "^6.2.8", "next": "12.1.0", "react": "17.0.2", @@ -2128,6 +2130,15 @@ "url": "https://opencollective.com/browserslist" } }, + "node_modules/canvas-confetti": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz", + "integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==", + "funding": { + "type": "donate", + "url": "https://www.paypal.me/kirilvatev" + } + }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -2311,6 +2322,11 @@ "node": ">=6.0.0" } }, + "node_modules/downloadjs": { + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz", + "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=" + }, "node_modules/electron-to-chromium": { "version": "1.4.75", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz", @@ -6371,6 +6387,11 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==" }, + "canvas-confetti": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz", + "integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==" + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -6522,6 +6543,11 @@ "esutils": "^2.0.2" } }, + "downloadjs": { + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz", + "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=" + }, "electron-to-chromium": { "version": "1.4.75", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz", diff --git a/package.json b/package.json index 4bbb632..9e7cb7d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "@chakra-ui/react": "^1.8.6", "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", + "canvas-confetti": "^1.5.1", + "downloadjs": "^1.4.7", "framer-motion": "^6.2.8", "next": "12.1.0", "react": "17.0.2", diff --git a/pages/_app.js b/pages/_app.js index 52d6181..a4e5044 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -23,15 +23,17 @@ function MyApp({ Component, pageProps, router }) { <> SVGL - Beautiful SVG vector logos - - + - - + + + + + + + + diff --git a/pages/svg/[id].js b/pages/svg/[id].js index 7cdc30f..916ae02 100644 --- a/pages/svg/[id].js +++ b/pages/svg/[id].js @@ -17,7 +17,8 @@ import { BiLinkExternal } from "react-icons/bi"; import Link from "next/link"; import Show from "animations/show"; import Loader from "animations/loader"; -import Hover from "animations/hover"; +import confetti from "canvas-confetti"; +import download from "downloadjs"; const fetcher = async (url) => { const res = await fetch(url); @@ -38,6 +39,11 @@ export default function Icon() { if (error) return ; if (!data) return ; + const downloadSvg = (name, url) => { + confetti(); + download(url, `${name}.svg`, "image/svg+xml"); + }; + return ( <> @@ -73,16 +79,15 @@ export default function Icon() { {data.title} - - - +