Make svg sprites loading

This commit is contained in:
2021-04-25 22:24:45 +02:00
parent 0696a6a11f
commit 02b81c33f4
20 changed files with 782 additions and 210 deletions

View File

@ -1,16 +1,117 @@
<script>
import { format } from 'date-fns'
import twitterLogo from '../svg/iconfinder_Twitter_4070150.svg'
import githubLogo from '../svg/iconfinder_github_2561442.svg'
import twitchLogo from '../svg/iconfinder_twitch_306173.svg'
import instagramLogo from '../svg/iconfinder_38-instagram_1161953.svg'
import emailIcon from '../svg/iconfinder_mail_5474819.svg'
import rssIcon from '../svg/iconfinder_icon-social-rss_211914.svg'
import jsonFeedIcon from '../svg/json_feed_icon.svg'
import type { PostContent } from 'src/routes/blog/_content'
import SvgIcon from './SvgIcon.svelte'
export let latestPosts
export let latestPosts: PostContent[]
</script>
<footer class="site-footer navigation-theme">
<div class="lists">
<section class="site-map">
<ul>
<li>
<a href="/">Introduction</a>
</li>
<li>
<a href="/portfolio">Portfolio</a>
<ul>
<li>
<a href="/portfolio#personal-information">About</a>
</li>
<li>
<a href="/portfolio#skills">Skills</a>
</li>
<li>
<a href="/portfolio#work-history">Work History</a>
</li>
<li>
<a href="/portfolio#projects">Projects</a>
</li>
<li>
<a href="/portfolio#education">Education</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="latest-posts">
<h3>
<a href="/blog">Latest posts</a>
</h3>
<ul>
{#each latestPosts as post}
<li>
<a rel="prefetch" href="/blog/{post.slug}">
<span>{post.title}</span>
<span class="date">
- {format(new Date(post.date), 'do MMM, yyyy')}
</span>
</a>
</li>
{/each}
</ul>
<hr />
<section class="subscribe">
<a href="/feed.xml" title="RSS feed" class="rss">
Subscribe
<SvgIcon name="rss" className="svg-icon" />
</a>
<a
href="/feed.json"
title="JSON feed"
class="json-feed"
aria-label="Subscribe with JSON feed"
>
<SvgIcon name="json-feed" className="svg-icon" />
</a>
</section>
</section>
<section class="socials">
<h3>Contact</h3>
<ul class="social-links">
<li class="email">
<a href="mailto: michalvankosk@gmail.com" title="E-mail address">
<SvgIcon name="mail" className="svg-icon" />
<span>michalvankosk@gmail.com</span>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/michalvankodev" title="Twitter profile">
<SvgIcon name="twitter" className="svg-icon" />
<span>Twitter</span>
</a>
</li>
<li class="github">
<a href="https://github.com/michalvankodev" title="Github profile">
<SvgIcon name="github" className="svg-icon" />
<span>Github</span>
</a>
</li>
<li class="twitch">
<a href="https://twitch.tv/michalvankodev" title="Twitch profile">
<SvgIcon name="twitch" className="svg-icon" />
<span>Twitch</span>
</a>
</li>
<li class="instagram">
<a
href="https://www.instagram.com/michalvankodev/"
title="Instagram profile"
>
<SvgIcon name="instagram" className="svg-icon" />
<span>Instagram</span>
</a>
</li>
</ul>
</section>
</div>
<footer class="bottom-line">
<span class="no-wrap">Created by @michalvankodev</span>
<span class="no-wrap">&copy; 2020</span>
</footer>
</footer>
<style>
h3 {
font: inherit;
@ -61,23 +162,22 @@
padding: 0 0.4em;
}
.email :global(svg path) {
.email :global(svg) {
fill: #eae9be;
}
.twitter :global(svg path) {
/* fill: rgb(29, 161, 242); */
.twitter :global(svg) {
stroke: #eae9be;
stroke-width: 2px;
fill: #eae9be;
}
.github :global(svg path) {
.github :global(svg) {
stroke: #eae9be;
stroke-width: 2px;
}
.twitch :global(svg path),
.twitch :global(svg),
.twitch :global(svg rect) {
/* fill: rgb(169, 112, 255); */
fill: #eae9be;
@ -95,7 +195,7 @@
fill: #eae9be;
}
:global(svg) {
:global(.svg-icon) {
height: 1em;
width: 1em;
}
@ -155,107 +255,3 @@
}
}
</style>
<footer class="site-footer navigation-theme">
<div class="lists">
<section class="site-map">
<ul>
<li>
<a href="/">Introduction</a>
</li>
<li>
<a href="/portfolio">Portfolio</a>
<ul>
<li>
<a href="/portfolio#personal-information">About</a>
</li>
<li>
<a href="/portfolio#skills">Skills</a>
</li>
<li>
<a href="/portfolio#work-history">Work History</a>
</li>
<li>
<a href="/portfolio#projects">Projects</a>
</li>
<li>
<a href="/portfolio#education">Education</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="latest-posts">
<h3>
<a href="/blog">Latest posts</a>
</h3>
<ul>
{#each latestPosts as post}
<li>
<a rel="prefetch" href="/blog/{post.slug}">
<span>{post.title}</span>
<span class="date">
- {format(new Date(post.date), 'do MMM, yyyy')}
</span>
</a>
</li>
{/each}
</ul>
<hr />
<section class="subscribe">
<a href="/feed.xml" title="RSS feed" class="rss">
Subscribe
{@html rssIcon}
</a>
<a
href="/feed.json"
title="JSON feed"
class="json-feed"
aria-label="Subscribe with JSON feed">
{@html jsonFeedIcon}
</a>
</section>
</section>
<section class="socials">
<h3>Contact</h3>
<ul class="social-links">
<li class="email">
<a href="mailto: michalvankosk@gmail.com" title="E-mail address">
{@html emailIcon}
<span>michalvankosk@gmail.com</span>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/michalvankodev" title="Twitter profile">
{@html twitterLogo}
<span>Twitter</span>
</a>
</li>
<li class="github">
<a href="https://github.com/michalvankodev" title="Github profile">
{@html githubLogo}
<span>Github</span>
</a>
</li>
<li class="twitch">
<a href="https://twitch.tv/michalvankodev" title="Twitch profile">
{@html twitchLogo}
<span>Twitch</span>
</a>
</li>
<li class="instagram">
<a
href="https://www.instagram.com/michalvankodev/"
title="Instagram profile">
{@html instagramLogo}
<span>Instagram</span>
</a>
</li>
</ul>
</section>
</div>
<footer class="bottom-line">
<span class="no-wrap">Created by @michalvankodev</span>
<span class="no-wrap">&copy; 2020</span>
</footer>
</footer>

View File

@ -0,0 +1,9 @@
<script>
import svgSprite from '../svg/build/icons-sprite.svg'
export let className
export let name
</script>
<svg aria-hidden="true" role="img" class={className}>
<use xlink:href={`${svgSprite}#${name}`} />
</svg>

View File

@ -1,5 +1,5 @@
import Prism from 'prismjs'
import loadLanguages from 'prismjs/components/index'
import loadLanguages from 'prismjs/components/index.js'
loadLanguages(['shell', 'markdown', 'json', 'yaml', 'typescript'])
@ -43,10 +43,10 @@ export const renderer = {
</figure>
`
},
code(source: string, lang: string) {
code(source: string, lang?: string) {
const highlightedSource = Prism.highlight(
source,
Prism.languages[lang],
Prism.languages[lang ?? 'shell'],
lang
)
return `<pre class='language-${lang}'><code class='language-${lang}'>${highlightedSource}</code></pre>`

View File

@ -1 +1 @@
<?xml version="1.0" ?><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
<?xml version="1.0" ?><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

Before

Width:  |  Height:  |  Size: 504 B

After

Width:  |  Height:  |  Size: 490 B

View File

@ -1,20 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon</title>
<desc>Created with Sketch.</desc>
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon" transform="translate(-4.000000, -14.000000)">
<rect id="background" fill="#8BE028" x="4" y="14" width="140" height="140"/>
<g id="elements" transform="translate(79.549513, 79.549513) rotate(-45.000000) translate(-79.549513, -79.549513) translate(26.049513, 20.549513)">
<path d="M7,64.9835977 L7,65.1904297 C15.2519531,65.1904297 17.9179687,68.4912109 17.9179687,78.4570312 L17.9179687,94.1992187 C17.9179687,110.576172 25.9794922,117.8125 44.2607422,117.8125 L49.8466797,117.8125 L49.8466797,105.942383 L46.9902344,105.942383 C36.6435547,105.942383 32.9619141,102.387695 32.9619141,92.4853516 L32.9619141,74.0136719 C32.9619141,64.4921875 28.7089844,59.2871094 20.3935547,58.5253906 L20.3935547,56.7480469 C28.9628906,55.9228516 32.9619141,51.1621094 32.9619141,41.9580078 L32.9619141,25.390625 C32.9619141,15.2978516 36.5166016,11.8066406 46.9902344,11.8066406 L49.8466797,11.8066406 L49.8466797,0 L44.2607422,0 C25.9160156,0 17.9179687,6.98242187 17.9179687,22.9785156 L17.9179687,36.6259766 C17.9179687,46.5917969 15.1884766,49.9560547 7,49.9560547 L7,50.0164023 C3.09098409,50.2736953 -9.23705556e-14,53.5258787 -9.23705556e-14,57.5 C-9.23705556e-14,61.4741213 3.09098409,64.7263047 7,64.9835977 Z" id="transmitter" fill="#497614"/>
<g id="dots-@-15pt" transform="translate(42.000000, 50.000000)" fill="#FFFFFF">
<circle id="Oval-1" cx="7.5" cy="7.5" r="7.5"/>
<circle id="Oval-2" cx="32.5" cy="7.5" r="7.5"/>
<circle id="Oval-3" cx="57.5" cy="7.5" r="7.5"/>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1 +0,0 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x33_43-twitch"><g><polygon points="67.175,26.001 36.269,104.961 36.269,427.68 146.135,427.68 146.135,485.999 207.948,485.999 266.269,427.68 355.598,427.68 475.731,307.544 475.731,26.001 " style="fill:#6441A5;"/><polygon points="434.558,286.905 365.866,355.598 256.001,355.598 197.679,413.917 197.679,355.598 104.96,355.598 104.96,67.176 434.558,67.176 " style="fill:#FFFFFF;"/><rect height="120.03" style="fill:#6441A5;" width="41.174" x="324.692" y="146.134"/><rect height="120.03" style="fill:#6441A5;" width="41.177" x="214.824" y="146.134"/></g></g><g id="Layer_1"/></svg>

Before

Width:  |  Height:  |  Size: 930 B

View File

@ -1 +0,0 @@
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#030303;}.cls-2{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><g data-name="Layer 4" id="Layer_4"><path class="cls-1" d="M24,6H8a5,5,0,0,0-5,5V21a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V11A5,5,0,0,0,24,6ZM8,8H24a3,3,0,0,1,2.7,1.72L16.6,17.3a1,1,0,0,1-1.2,0L5.3,9.72A3,3,0,0,1,8,8ZM24,24H8a3,3,0,0,1-3-3V12l9.2,6.9a3,3,0,0,0,3.6,0L27,12v9A3,3,0,0,1,24,24Z"/><rect class="cls-2" height="32" width="32"/></g></g></svg>

Before

Width:  |  Height:  |  Size: 537 B

View File

@ -1 +0,0 @@
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="twitch tv gaming stream gamer" id="twitch_tv_gaming_stream_gamer"><path d="M26,3H6A1,1,0,0,0,5,4V19a1,1,0,0,0,2,0V5H25V17.59L20.59,22H15a1,1,0,0,0-.71.29l-2.79,2.8V23a1,1,0,0,0-1-1H6a1,1,0,0,0,0,2H9.5v3.5a1,1,0,0,0,.62.92.84.84,0,0,0,.38.08,1,1,0,0,0,.71-.29L15.41,24H21a1,1,0,0,0,.71-.29l5-5A1,1,0,0,0,27,18V4A1,1,0,0,0,26,3Z"/><path d="M15,16V11a1,1,0,0,0-2,0v5a1,1,0,0,0,2,0Z"/><path d="M21,16V11a1,1,0,0,0-2,0v5a1,1,0,0,0,2,0Z"/></g></svg>

Before

Width:  |  Height:  |  Size: 547 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -11,26 +11,7 @@
viewBox="0 0 140 140"
height="140px"
width="140px">
<sodipodi:namedview
inkscape:current-layer="icon"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="80.375472"
inkscape:cx="41.171285"
inkscape:zoom="5.6714286"
showgrid="false"
id="namedview19"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<defs
id="defs6" />
<g

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

1
src/svg/mail.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2" id="Layer_2"><path d="M24,6H8a5,5,0,0,0-5,5V21a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V11A5,5,0,0,0,24,6ZM8,8H24a3,3,0,0,1,2.7,1.72L16.6,17.3a1,1,0,0,1-1.2,0L5.3,9.72A3,3,0,0,1,8,8ZM24,24H8a3,3,0,0,1-3-3V12l9.2,6.9a3,3,0,0,0,3.6,0L27,12v9A3,3,0,0,1,24,24Z"/></g></svg>

After

Width:  |  Height:  |  Size: 364 B

View File

Before

Width:  |  Height:  |  Size: 687 B

After

Width:  |  Height:  |  Size: 687 B

View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#444444" d="M16,0.4c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2
c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3
c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5C23.1,6.6,24.4,7,24.4,7
c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4
c0,0.4,0.3,0.9,1.1,0.8C27.4,29.5,32,23.5,32,16.4C32,7.6,24.8,0.4,16,0.4z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<path fill="#444444" d="M28.2,0H3.8C1.7,0,0,1.7,0,3.8v24.4C0,30.3,1.7,32,3.8,32h24.4c2.1,0,3.8-1.7,3.8-3.8V3.8
C32,1.7,30.3,0,28.2,0z M24,4h3c0.6,0,1,0.4,1,1v3c0,0.6-0.4,1-1,1h-3c-0.6,0-1-0.4-1-1V5C23,4.4,23.4,4,24,4z M16,9.9
c3.4,0,6.2,2.7,6.2,6.1c0,3.4-2.8,6.1-6.2,6.1c-3.4,0-6.2-2.7-6.2-6.1C9.9,12.6,12.6,9.9,16,9.9z M28,29H4c-0.6,0-1-0.4-1-1V13h4
c-0.5,0.8-0.7,2.1-0.7,3c0,5.4,4.4,9.7,9.7,9.7c5.4,0,9.7-4.4,9.7-9.7c0-0.9-0.1-2.3-0.8-3h4v15C29,28.6,28.6,29,28,29z"/>
</svg>

Before

Width:  |  Height:  |  Size: 954 B

View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<path fill="#444444" d="M32,6.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.7,3.8,24,3,22.2,3
c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,10.8,5.5,8.2,2.2,4.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1C2.9,27.9,6.4,29,10.1,29c12.1,0,18.7-10,18.7-18.7
c0-0.3,0-0.6,0-0.8C30,8.5,31.1,7.4,32,6.1z"/>
</svg>

Before

Width:  |  Height:  |  Size: 998 B

View File

Before

Width:  |  Height:  |  Size: 692 B

After

Width:  |  Height:  |  Size: 692 B

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB