Make svg sprites loading
This commit is contained in:
@ -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">© 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">© 2020</span>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
9
src/components/SvgIcon.svelte
Normal file
9
src/components/SvgIcon.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user