cupcakearmy
/
nicco.io
mirror of https://github.com/cupcakearmy/nicco.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

icons

This commit is contained in:
cupcakearmy 2022-03-09 17:07:26 +01:00
parent 95c8c8e8b0
commit de45eb5e45
No known key found for this signature in database
GPG Key ID: 3235314B4D31232F
24 changed files with 173 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/components/Icon.svelte
View File

@ -1,27 +1,57 @@
<script lang="ts">
import { onMount } from 'svelte'
export let icon: string
<script lang="ts" context="module">
import IconAnalytics from '$lib/icons/IconAnalytics.svelte'
import IconCafeOutline from '$lib/icons/IconCafeOutline.svelte'
import IconCaretUpCircle from '$lib/icons/IconCaretUpCircle.svelte'
import IconChatbubblesOutline from '$lib/icons/IconChatbubblesOutline.svelte'
import IconFingerPrintOutline from '$lib/icons/IconFingerPrintOutline.svelte'
import IconHeartSharp from '$lib/icons/IconHeartSharp.svelte'
import IconLinkOutline from '$lib/icons/IconLinkOutline.svelte'
import IconLogoGithub from '$lib/icons/IconLogoGithub.svelte'
import IconMailOutline from '$lib/icons/IconMailOutline.svelte'
$: src = `/icons/${icon}.svg`
import IconSearchOutline from '$lib/icons/IconSearchOutline.svelte'
let html: string | null = null
export type IconType =
| 'search-outline'
| 'link-outline'
| 'cafe-outline'
| 'logo-github'
| 'mail-outline'
| 'chatbubbles-outline'
| 'logo-github'
| 'analytics'
| 'finger-print-outline'
| 'heart-sharp'
| 'caret-up-circle'
onMount(async () => {
html = await fetch(src).then((res) => res.text())
})
const mapping: Record<IconType, any> = {
'search-outline': IconSearchOutline,
'link-outline': IconLinkOutline,
'cafe-outline': IconCafeOutline,
'logo-github': IconLogoGithub,
'mail-outline': IconMailOutline,
'chatbubbles-outline': IconChatbubblesOutline,
analytics: IconAnalytics,
'finger-print-outline': IconFingerPrintOutline,
'heart-sharp': IconHeartSharp,
'caret-up-circle': IconCaretUpCircle,
}
</script>
{#if html === null}
<img {...$$restProps} {src} alt={icon} />
{:else}
<span {...$$restProps}>
{@html html}
<script lang="ts">
export let icon: IconType
$: component = mapping[icon]
</script>
{#if component}
<span>
<svelte:component this={component} />
</span>
{/if}
<style>
span,
img {
span {
display: inline-block;
width: 1em;
height: 1em;

13
src/lib/components/IconList.svelte
View File

@ -1,11 +1,14 @@
<script lang="ts">
import Icon from './Icon.svelte'
type Link = {
<script lang="ts" context="module">
import type { IconType } from './Icon.svelte'
export type Link = {
href: string
name: string
icon: string
icon: IconType
}
</script>
<script lang="ts">
import Icon from './Icon.svelte'
export let links: Link[] = []

2
src/lib/components/Nav.svelte
View File

@ -5,7 +5,7 @@
const routes = [
{ name: 'About', href: '/about' },
{ name: 'Works', href: '/works' },
// { name: 'Works', href: '/works' },
{ name: 'Projects', href: '/projects' },
{ name: 'Blog', href: '/blog' },
{ name: 'Contact', href: '/contact' },

5
src/lib/icons/IconAnalytics.svelte Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
><title>Analytics</title><path
d="M456 128a40 40 0 00-37.23 54.6l-84.17 84.17a39.86 39.86 0 00-29.2 0l-60.17-60.17a40 40 0 10-74.46 0L70.6 306.77a40 40 0 1022.63 22.63L193.4 229.23a39.86 39.86 0 0029.2 0l60.17 60.17a40 40 0 1074.46 0l84.17-84.17A40 40 0 10456 128z"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 362 B

11
src/lib/icons/IconCafeOutline.svelte Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Cafe</title>
<path
d="M368 80h64a16 16 0 0116 16v34a46 46 0 01-46 46h-34M96 80h272v192a80 80 0 01-80 80H176a80 80 0 01-80-80V80h0zM64 416h336"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 368 B

5
src/lib/icons/IconCaretUpCircle.svelte Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
><title>Caret Up Circle</title><path
d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm74.14 252H181.86a16 16 0 01-12.29-26.23l74.13-89.09a16 16 0 0124.6 0l74.13 89.09A16 16 0 01330.14 300z"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

19
src/lib/icons/IconChatbubblesOutline.svelte Normal file
View File

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Chatbubbles</title>
<path
d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 00-3.7 34.2c0 92.3 74.8 169.1 171 169.1 15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.44 26.44 0 019.3-1.7 26 26 0 0110.1 2l56.7 20.1a13.52 13.52 0 003.9 1 8 8 0 008-8 12.85 12.85 0 00-.5-2.7z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="32"
/>
<path
d="M66.46 232a146.23 146.23 0 006.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 002.71 7.68A8.17 8.17 0 0072 464a7.26 7.26 0 002.91-.6l56.21-22a15.7 15.7 0 0112 .2c18.94 7.38 39.88 12 60.83 12A159.21 159.21 0 00284 432.11"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="32"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 977 B

7
src/lib/icons/IconFingerPrintOutline.svelte Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Finger Print</title>
<path
fill="currentColor"
d="M390.42 75.28a10.45 10.45 0 01-5.32-1.44C340.72 50.08 302.35 40 256.35 40c-45.77 0-89.23 11.28-128.76 33.84C122 77 115.11 74.8 111.87 69a12.4 12.4 0 014.63-16.32A281.81 281.81 0 01256.35 16c49.23 0 92.23 11.28 139.39 36.48a12 12 0 014.85 16.08 11.3 11.3 0 01-10.17 6.72zm-330.79 126a11.73 11.73 0 01-6.7-2.16 12.26 12.26 0 01-2.78-16.8c22.89-33.6 52-60 86.69-78.48 72.58-38.84 165.51-39.12 238.32-.24 34.68 18.48 63.8 44.64 86.69 78a12.29 12.29 0 01-2.78 16.8 11.26 11.26 0 01-16.18-2.88c-20.8-30.24-47.15-54-78.36-70.56-66.34-35.28-151.18-35.28-217.29.24-31.44 16.8-57.79 40.8-78.59 71a10 10 0 01-9.02 5.08zM204.1 491a10.66 10.66 0 01-8.09-3.6C175.9 466.48 165 453 149.55 424c-16-29.52-24.27-65.52-24.27-104.16 0-71.28 58.71-129.36 130.84-129.36S387 248.56 387 319.84a11.56 11.56 0 11-23.11 0c0-58.08-48.32-105.36-107.72-105.36S148.4 261.76 148.4 319.84c0 34.56 7.39 66.48 21.49 92.4 14.8 27.6 25 39.36 42.77 58.08a12.67 12.67 0 010 17 12.44 12.44 0 01-8.56 3.68zm165.75-44.4c-27.51 0-51.78-7.2-71.66-21.36a129.1 129.1 0 01-55-105.36 11.57 11.57 0 1123.12 0 104.28 104.28 0 0044.84 85.44c16.41 11.52 35.6 17 58.72 17a147.41 147.41 0 0024-2.4c6.24-1.2 12.25 3.12 13.4 9.84a11.92 11.92 0 01-9.47 13.92 152.28 152.28 0 01-27.95 2.88zM323.38 496a13 13 0 01-3-.48c-36.76-10.56-60.8-24.72-86-50.4-32.37-33.36-50.16-77.76-50.16-125.28 0-38.88 31.9-70.56 71.19-70.56s71.2 31.68 71.2 70.56c0 25.68 21.5 46.56 48.08 46.56s48.08-20.88 48.08-46.56c0-90.48-75.13-163.92-167.59-163.92-65.65 0-125.75 37.92-152.79 96.72-9 19.44-13.64 42.24-13.64 67.2 0 18.72 1.61 48.24 15.48 86.64 2.32 6.24-.69 13.2-6.7 15.36a11.34 11.34 0 01-14.79-7 276.39 276.39 0 01-16.88-95c0-28.8 5.32-55 15.72-77.76 30.75-67 98.94-110.4 173.6-110.4 105.18 0 190.71 84.24 190.71 187.92 0 38.88-31.9 70.56-71.2 70.56s-71.2-31.68-71.2-70.56c.01-25.68-21.49-46.6-48.07-46.6s-48.08 20.88-48.08 46.56c0 41 15.26 79.44 43.23 108.24 22 22.56 43 35 75.59 44.4 6.24 1.68 9.71 8.4 8.09 14.64a11.39 11.39 0 01-10.87 9.16z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

7
src/lib/icons/IconHeartSharp.svelte Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Heart</title>
<path
fill="currentColor"
d="M256 448l-9-6c-42.78-28.57-96.91-60.86-137-108.32-42.25-50-62.52-101.35-62-157C48.63 114.54 98.46 64 159.08 64c48.11 0 80.1 28 96.92 48.21C272.82 92 304.81 64 352.92 64c60.62 0 110.45 50.54 111.08 112.65.56 55.68-19.71 107-62 157-40.09 47.49-94.22 79.78-137 108.35z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 420 B

11
src/lib/icons/IconLinkOutline.svelte Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Link</title>
<path
d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="36"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

7
src/lib/icons/IconLogoGithub.svelte Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Logo Github</title>
<path
fill="currentColor"
d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 941 B

24
src/lib/icons/IconMailOutline.svelte Normal file
View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Mail</title>
<rect
x="48"
y="96"
width="416"
height="320"
rx="40"
ry="40"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
/>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
d="M112 160l144 112 144-112"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 484 B

18
src/lib/icons/IconSearchOutline.svelte Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Search</title>
<path
d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"
fill="none"
stroke="currentColor"
stroke-miterlimit="10"
stroke-width="32"
/>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="32"
d="M338.29 338.29L448 448"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

4
src/routes/contact.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
import type { Link } from '$lib/components/IconList.svelte'
import IconList from '$lib/components/IconList.svelte'
import SimplePage from '$lib/components/SimplePage.svelte'
const links = [
const links: Link[] = [
{
href: 'mailto:hi@nicco.io',
name: 'Say hi@nicco.io',
@ -21,6 +22,7 @@
{ href: 'https://spectare.nicco.io/share/Xklie3UU/Nicco', name: 'Website Statistics', icon: 'analytics' },
{ href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
{ href: '/support', name: 'Support', icon: 'heart-sharp' },
{ href: 'https://status.nicco.io', name: 'Status Monitor', icon: 'caret-up-circle' },
]
</script>

3
src/routes/support.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
import type { Link } from '$lib/components/IconList.svelte'
import IconList from '$lib/components/IconList.svelte'
import SimplePage from '$lib/components/SimplePage.svelte'
const links = [
const links: Link[] = [
{
href: 'https://www.buymeacoffee.com/cupcakearmy',
name: 'Buy Me A Coffee',

1
static/icons/analytics.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Analytics</title><path d="M456 128a40 40 0 00-37.23 54.6l-84.17 84.17a39.86 39.86 0 00-29.2 0l-60.17-60.17a40 40 0 10-74.46 0L70.6 306.77a40 40 0 1022.63 22.63L193.4 229.23a39.86 39.86 0 0029.2 0l60.17 60.17a40 40 0 1074.46 0l84.17-84.17A40 40 0 10456 128z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 350 B

4
static/icons/cafe-outline.svg
View File

@ -1,4 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Cafe</title>
<path d='M368 80h64a16 16 0 0116 16v34a46 46 0 01-46 46h-34M96 80h272v192a80 80 0 01-80 80H176a80 80 0 01-80-80V80h0zM64 416h336' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 341 B

5
static/icons/chatbubbles-outline.svg
View File

@ -1,5 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Chatbubbles</title>
<path d='M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 00-3.7 34.2c0 92.3 74.8 169.1 171 169.1 15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.44 26.44 0 019.3-1.7 26 26 0 0110.1 2l56.7 20.1a13.52 13.52 0 003.9 1 8 8 0 008-8 12.85 12.85 0 00-.5-2.7z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' />
<path d='M66.46 232a146.23 146.23 0 006.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 002.71 7.68A8.17 8.17 0 0072 464a7.26 7.26 0 002.91-.6l56.21-22a15.7 15.7 0 0112 .2c18.94 7.38 39.88 12 60.83 12A159.21 159.21 0 00284 432.11' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 924 B

4
static/icons/finger-print-outline.svg
View File

@ -1,4 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Finger Print</title>
<path fill='currentColor' d='M390.42 75.28a10.45 10.45 0 01-5.32-1.44C340.72 50.08 302.35 40 256.35 40c-45.77 0-89.23 11.28-128.76 33.84C122 77 115.11 74.8 111.87 69a12.4 12.4 0 014.63-16.32A281.81 281.81 0 01256.35 16c49.23 0 92.23 11.28 139.39 36.48a12 12 0 014.85 16.08 11.3 11.3 0 01-10.17 6.72zm-330.79 126a11.73 11.73 0 01-6.7-2.16 12.26 12.26 0 01-2.78-16.8c22.89-33.6 52-60 86.69-78.48 72.58-38.84 165.51-39.12 238.32-.24 34.68 18.48 63.8 44.64 86.69 78a12.29 12.29 0 01-2.78 16.8 11.26 11.26 0 01-16.18-2.88c-20.8-30.24-47.15-54-78.36-70.56-66.34-35.28-151.18-35.28-217.29.24-31.44 16.8-57.79 40.8-78.59 71a10 10 0 01-9.02 5.08zM204.1 491a10.66 10.66 0 01-8.09-3.6C175.9 466.48 165 453 149.55 424c-16-29.52-24.27-65.52-24.27-104.16 0-71.28 58.71-129.36 130.84-129.36S387 248.56 387 319.84a11.56 11.56 0 11-23.11 0c0-58.08-48.32-105.36-107.72-105.36S148.4 261.76 148.4 319.84c0 34.56 7.39 66.48 21.49 92.4 14.8 27.6 25 39.36 42.77 58.08a12.67 12.67 0 010 17 12.44 12.44 0 01-8.56 3.68zm165.75-44.4c-27.51 0-51.78-7.2-71.66-21.36a129.1 129.1 0 01-55-105.36 11.57 11.57 0 1123.12 0 104.28 104.28 0 0044.84 85.44c16.41 11.52 35.6 17 58.72 17a147.41 147.41 0 0024-2.4c6.24-1.2 12.25 3.12 13.4 9.84a11.92 11.92 0 01-9.47 13.92 152.28 152.28 0 01-27.95 2.88zM323.38 496a13 13 0 01-3-.48c-36.76-10.56-60.8-24.72-86-50.4-32.37-33.36-50.16-77.76-50.16-125.28 0-38.88 31.9-70.56 71.19-70.56s71.2 31.68 71.2 70.56c0 25.68 21.5 46.56 48.08 46.56s48.08-20.88 48.08-46.56c0-90.48-75.13-163.92-167.59-163.92-65.65 0-125.75 37.92-152.79 96.72-9 19.44-13.64 42.24-13.64 67.2 0 18.72 1.61 48.24 15.48 86.64 2.32 6.24-.69 13.2-6.7 15.36a11.34 11.34 0 01-14.79-7 276.39 276.39 0 01-16.88-95c0-28.8 5.32-55 15.72-77.76 30.75-67 98.94-110.4 173.6-110.4 105.18 0 190.71 84.24 190.71 187.92 0 38.88-31.9 70.56-71.2 70.56s-71.2-31.68-71.2-70.56c.01-25.68-21.49-46.6-48.07-46.6s-48.08 20.88-48.08 46.56c0 41 15.26 79.44 43.23 108.24 22 22.56 43 35 75.59 44.4 6.24 1.68 9.71 8.4 8.09 14.64a11.39 11.39 0 01-10.87 9.16z' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

4
static/icons/heart-sharp.svg
View File

@ -1,4 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Heart</title>
<path fill='currentColor' d='M256 448l-9-6c-42.78-28.57-96.91-60.86-137-108.32-42.25-50-62.52-101.35-62-157C48.63 114.54 98.46 64 159.08 64c48.11 0 80.1 28 96.92 48.21C272.82 92 304.81 64 352.92 64c60.62 0 110.45 50.54 111.08 112.65.56 55.68-19.71 107-62 157-40.09 47.49-94.22 79.78-137 108.35z' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 409 B

4
static/icons/link-outline.svg
View File

@ -1,4 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Link</title>
<path d='M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 302 B

4
static/icons/logo-github.svg
View File

@ -1,4 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Logo Github</title>
<path fill='currentColor' d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 930 B

5
static/icons/mail-outline.svg
View File

@ -1,5 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Mail</title>
<rect x='48' y='96' width='416' height='320' rx='40' ry='40' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' />
<path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M112 160l144 112 144-112' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 411 B

5
static/icons/search-outline.svg
View File

@ -1,5 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<title>Search</title>
<path d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
<path fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M338.29 338.29L448 448' />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 405 B