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

    
1 <script>
2   import SocialIcons from '@rodneylab/svelte-social-icons';
3 </script>
4  
5 <SocialIcons alt="" network="twitter" />

  

    
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>