Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Svelte Social Icons: Easy SVG Logos in SvelteKit # Svelte Social Icons: Easy SVG Logos in SvelteKit #

blurry low resolution placeholder image Svelte Social Icons
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Svelte Social Icons: Easy SVG Logos in SvelteKit #

Published: 4 years ago
3 minute read
Gunning Fog Index: 4.9
3 comments
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
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 your app footer or even blog post share buttons.

📹 Svelte Social Icons: Video #

Please enable JavaScript to watch the 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.
blurry low resolution placeholder image Svelte Social Icons — icons shown for 47 popular social networks in native colours.
Usage

Customizing svelte‑social‑icons #

blurry low resolution placeholder image 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.
Customization
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>
Customization Icon Examples.

🔗 Svelte Social Icons: Links #

  • NPM package page for svelte-social-icons ,
  • svelte-social-icons .

🙏🏽 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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
SVELTEKIT

Likes:

Likes

  • josef profile avatar
  • Javascript all day profile avatar
Likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Svelte Share Buttons: using Web Share API with Fallback

Svelte Share Buttons: using Web Share API with Fallback

sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Comments

  • Mos

    Hello, How can i add Share functionality for the Buttons so that the current site can be shared via Twitter, email, Facebook and so on like you have under your blog title.

    4 years ago
    • Rodney

      Hi Mos, thanks for reaching out, that is a great question. It is not too difficult to do, but not easy to explain in a few lines. I will write a blog post. I have already done it in Svelte with Twitter, Whatsapp, Facebook and Telegram, if there's one or two other apps you'd like, let me know so I can try to include them.
      4 years ago
    • Rodney

      Hi Mos, as promised, I have now added a new post taking you through how to add share functionality to your Svelte app using the Web Share API with fallbacks for browsers which do not yet support it. I hope you find it useful!
      4 years ago

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.