MAIS AMOR POR FAVOR

Svelte Social Icons: Easy SVG Logos in SvelteKit

Svelte Social Icons

Svelte Social Icons: Easy SVG Logos in SvelteKit

SHARE:

🌟 Adding Social Network Logos to your Svelte App

Let's look at how to add Svelte social icons to your Svelte app using svelte-social-icons. The package has a small footprint and is pretty easy to get going. In this video we look at how to install it and then how you can add Twitter, GitHub, Discord and other icons to you app footer or even blog post share buttons.

📹 Svelte Social Icons: Video

Svelte Social Icons: Easy SVG Logos in SvelteKit

🖥 Code

Install

pnpm install @rodneylab/svelte-social-icons
Install svelte-social-icons

Usage

src/routes/twitter.svelte
svelte
1<script>
2 import SocialIcons from '@rodneylab/svelte-social-icons';
3</script>
4
5<SocialIcons alt="" network="twitter" />
Svelte Social Icons: Twitter Icon Example.
Svelte Social Icons - icons shown for 47 popular social networks in native colours
Usage

Customising svelte-social-icons

Svelte Social Icons - icons shown for 47 popular social networks in rainbow colours each icon has background set to one of the six rainbow colours and colours alternate in sequence
Customisation
src/routes/index.svelteclick to expand code.
src/routes/index.svelte
svelte
1<script>
2 import SocialIcons from '@rodneylab/svelte-social-icons';
3 import networkObject from '../../../svelte-social-icons/src/_networks-db';
4
5 const networks = Object.keys(networkObject);
6 const rainbowBackground = ['#D12229', '#F68A1E', '#FDE01A', '#007940', '#24408E', '#732982'];
7 const rainbowForeground = ['#fbf3f2', '#032539', '#032539', '#fbf3f2', '#fbf3f2', '#fbf3f2'];
8</script>
9
10<div class="container">
11 <div class="content">
12 <div class="icons">
13 {#each networks as network}
14 <div class="icon">
15 <SocialIcons alt="" {network} />
16 </div>
17 {/each}
18 </div>
19
20 <div class="icons">
21 {#each networks as network}
22 <div class="icon">
23 <SocialIcons alt="" {network} width="32" height="32" />
24 </div>
25 {/each}
26 </div>
27
28 <div class="icons">
29 {#each networks as network}
30 <div class="icon">
31 <SocialIcons alt="" {network} fgColor="#fbf3f2" bgColor="#032539" />
32 </div>
33 {/each}
34 </div>
35
36 <div class="icons">
37 {#each networks as network}
38 <div class="icon">
39 <SocialIcons alt="" {network} fgColor="#032539" bgColor="#fbf3f2" />
40 </div>
41 {/each}
42 </div>
43
44 <div class="icons">
45 {#each networks as network, index}
46 <div class="icon">
47 <SocialIcons
48 alt=""
49 {network}
50 fgColor={rainbowForeground[index % 6]}
51 bgColor={rainbowBackground[index % 6]}
52 />
53 </div>
54 {/each}
55 </div>
56 </div>
57</div>
58
59<style>
60 .container {
61 display: flex;
62 width: 100%;
63 }
64
65 .content {
66 max-width: 786px;
67 margin: 3rem auto;
68 }
69
70 .icons {
71 display: flex;
72 flex-wrap: wrap;
73 background-color: #fbf3f2;
74 border: 2px solid #032539;
75 border-radius: 0.5rem;
76 gap: 0.5rem;
77 box-shadow: 0 0 0.5rem 0 #0325397f;
78 padding: 1rem;
79 margin-bottom: 2rem;
80 }
81</style>
Customisation Icon Examples.

🙏🏽 Feedback

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.