https://github.com/rodneylab/svelte-social-icons

Beautiful, easy SVG social icons in Svelte
https://github.com/rodneylab/svelte-social-icons

icon icons social-network svelte sveltekit svg

Last synced: 4 days ago
JSON representation

Beautiful, easy SVG social icons in Svelte

• Host: GitHub
• URL: https://github.com/rodneylab/svelte-social-icons
• Owner: rodneylab
• License: bsd-3-clause
• Created: 2021-08-21T17:35:42.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-15T08:50:05.000Z (6 months ago)
• Last Synced: 2024-10-29T00:28:00.430Z (17 days ago)
• Topics: icon, icons, social-network, svelte, sveltekit, svg
• Language: TypeScript
• Homepage:
• Size: 1.48 MB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        




  

    

  





  Svelte Social Icons



# svelte-social-icons

[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/rodneylab/svelte-social-icons)

Social icons for Svelte. Based on react-social-icons by Jake Trent.

To install:

```

pnpm install @rodneylab/svelte-social-icons

```

Alternatively, replace `pnpm` with `npm` or run `yarn add @rodneylab/svelte-social-icons`.

To use:

```

  import SocialIcons from '@rodneylab/svelte-social-icons';

```

![Svelte Social Icons - icons shown for 47 popular social networks in native colours](https://github.com/rodneylab/svelte-social-icons/raw/main/images/svelte-social-icons-regular.png)

- Change icon size:

```html

```

![Svelte Social Icons - icons shown for 47 popular social networks in native colours, icons are smaller than previous image](https://github.com/rodneylab/svelte-social-icons/raw/main/images/svelte-social-icons-small.png)

- Change foreground and background colours:

```html

```

![Svelte Social Icons - icons shown for 47 popular social networks with themed dark background and light foreground colours](https://github.com/rodneylab/svelte-social-icons/raw/main/images/svelte-social-icons-background.png)

![Svelte Social Icons - icons shown for 47 popular social networks with themed light background and dark foreground colours](https://github.com/rodneylab/svelte-social-icons/raw/main/images/svelte-social-icons-foreground.png)

![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](https://github.com/rodneylab/svelte-social-icons/raw/main/images/svelte-social-icons-rainbow.png)

## Props

| Property | Type    | Required | Description                                                                                                                                                   |

| :------- | :------ | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| network  | Network |   Yes    | Override which network icon to render. You can import the type if you need it in TypeScript: `import type { Network } from '@rodneylab/svelte-social-icons';` |

| bgColor  | String  |    No    | Override the background fill colour (defaults to social network's color).                                                                                     |

| fgColor  | String  |    No    | Override the icon's fill colour (defaults to transparent).                                                                                                    |

| style    | Object  |    No    | Override style properties passed to the rendered anchor tag.                                                                                                  |