# scriptex-socials

> A native web component: links to various social media with SVG icons support

Latest version **1.10.1** (published 2026-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install scriptex-socials
pnpm add scriptex-socials
yarn add scriptex-socials
bun add scriptex-socials
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.10.1 |
| Published | 2026-06-10 |
| First published | 2020-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 48 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Atanas Atanasov |
| Maintainers | scriptex |
| Keywords | Socials, Social Links, SVG Social icons, SVG Social links |

## Links

- npm: https://www.npmjs.com/package/scriptex-socials
- Repository: https://github.com/scriptex/socials
- Homepage: https://socials.atanas.info
- Issues: https://github.com/scriptex/socials/issues
- Funding: https://github.com/sponsors/scriptex
- npm.io page: https://npm.io/package/scriptex-socials

## Dependencies (3)

- [svgo](https://npm.io/package/svgo.md) ^4.0.0
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.12
- [commander](https://npm.io/package/commander.md) ^15.0.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.10.1 (latest) — 2026-06-10
- 1.10.0 — 2026-06-10
- 1.9.1 — 2025-07-09
- 1.9.0 — 2025-06-30
- 1.8.0 — 2024-05-10
- 1.7.0 — 2022-09-29
- 1.6.0 — 2022-09-02
- 1.5.1 — 2021-10-21
- 1.5.0 — 2021-10-21
- 1.4.0 — 2021-05-19
- 1.3.0 — 2021-01-12
- 1.2.0 — 2020-07-29
- 1.1.0 — 2020-07-29
- 1.0.0 — 2020-07-29

## README

<!--
```
<custom-element-demo>
  <template>
  	<base href="https://raw-dot-custom-elements.appspot.com/scriptex/socials/1.7.0/socials/">
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<script src="https://unpkg.com/scriptex-socials"></script>
	<social-links></social-links>
  </template>
</custom-element-demo>
```
-->

[![Github Build](https://github.com/scriptex/socials/workflows/Build/badge.svg)](https://github.com/scriptex/socials/actions?query=workflow%3ABuild)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/socials/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/socials&utm_campaign=Badge_Grade)
[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/socials/badge)](https://www.codefactor.io/repository/github/scriptex/socials)
[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[![Analytics](https://ga-beacon.atanas.info/api/analytics?account=UA-83446952-1&page=GitHub.com/scriptex/socials&pixel)](https://github.com/scriptex/socials/)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/scriptex-socials)

# Atanas Atanasov's Socials

> Links to various social media

This is a native web component built with TypeScript, with no dependencies, which lists links to various social medias.

## Install

```sh
npm i scriptex-socials

# or

yarn add scriptex-socials
```

## Usage

In your JavaScript/TypeScript entry point:

```javascript
import 'scriptex-socials';
```

You can also include the web component directly from **unpkg.com**:

```javascript
import('https://unpkg.com/scriptex-socials');
```

or

```html
<script async src="https://unpkg.com/scriptex-socials"></script>
```

Then add the component in your HTML/JSX markup:

```html
<social-links></social-links>

<!-- or with custom color -->

<social-links style="color: red;"></social-links>

<div style="background: black;">
	<social-links style="color: white;"></social-links>
</div>
```

## React with TypeScript

If you're using React with TypeScript, you need to extends the JSX `IntrinsicElements` interface so TypeScript knows that the `social-links` element exists.

You can do so in a `custom.d.ts` file in your project's root folder. Don't forget to add that file in your `tsconfig.json`!

```typescript
declare namespace JSX {
	interface IntrinsicElements {
		'social-links': any;
	}
}
```

## Contents

Currently it includes the following:

<div>
<a href="https://atanas.info" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg" alt="Go to my website" width="24" align="top"> Go to my website</a>

<a href="mailto:hi@atanas.info" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg" alt="Send me an email" width="24" align="top"> Send me an email</a>

<a href="https://www.linkedin.com/in/scriptex/" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg" alt="Find me on LinkedIn" width="24" align="top"> Find me on LinkedIn</a>

<a href="https://github.com/scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg" alt="See my projects on Github" width="24" align="top"> See my projects on Github</a>

<a href="https://gitlab.com/scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg" alt="See my projects on Gitlab" width="24" align="top"> See my projects on Gitlab</a>

<a href="https://twitter.com/scriptexbg" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter-x.svg" alt="Follow me on Twitter" width="24" align="top"> Follow me on Twitter</a>

<a href="https://mastodon.social/@scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/mastodon.svg" alt="Follow me on Mastodon Social" width="24" align="top"> Follow me on Mastodon Social</a>

<a href="https://bsky.app/profile/scriptex.bsky.social" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/bluesky.svg" alt="Follow me on Bluesky" width="24" align="top"> Follow me on Bluesky</a>

<a href="https://www.npmjs.com/~scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg" alt="See my packages on NPM" width="24" align="top"> See my packages on NPM</a>

<a href="https://www.youtube.com/user/scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg" alt="See my videos on YouTube" width="24" align="top"> See my videos on YouTube</a>

<a href="https://stackoverflow.com/users/4140082/atanas-atanasov" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg" alt="See my profile on StackOverflow" width="24" align="top"> See my profile on StackOverflow</a>

<a href="https://codepen.io/scriptex/" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg" alt="See my work on Codepen" width="24" align="top"> See my work on Codepen</a>

<a href="https://profile.codersrank.io/user/scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg" alt="See my profile on Codersrank" width="24" align="top"> See my profile on Codersrank</a>

<a href="https://linktr.ee/scriptex" target="_blank"><img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg" alt="See the rest of my links on Linktree" width="24" align="top"> See the rest of my links on Linktree</a>
</div>

## LICENSE

MIT

---

<div align="center">
    Connect with me:
</div>

<br />

<div align="center">
    <a href="https://atanas.info">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="mailto:hi@atanas.info">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://www.linkedin.com/in/scriptex/">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://github.com/scriptex">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://gitlab.com/scriptex">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://twitter.com/scriptexbg">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/~scriptex">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://www.youtube.com/user/scriptex">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://stackoverflow.com/users/4140082/atanas-atanasov">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://codepen.io/scriptex/">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg" width="20" alt="" />
    </a>
    &nbsp;
    <a href="https://profile.codersrank.io/user/scriptex">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg" height="20" alt="" />
    </a>
    &nbsp;
    <a href="https://linktr.ee/scriptex">
        <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg" height="20" alt="" />
    </a>
</div>

---

<div align="center">
Support and sponsor my work:
<br />
<br />
<a href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome" title="Tweet">
 <img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
</a>
<a href="https://paypal.me/scriptex" title="Donate on Paypal">
 <img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
</a>
<a href="https://revolut.me/scriptex" title="Donate on Revolut">
 <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
</a>
<a href="https://patreon.com/atanas" title="Become a Patron">
 <img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
</a>
<a href="https://ko-fi.com/scriptex" title="Buy Me A Coffee">
 <img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
</a>
<a href="https://liberapay.com/scriptex/donate" title="Donate on Liberapay">
 <img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />
</a>

<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" title="Donate Bitcoin">
 <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" title="Donate Etherium">
 <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" title="Donate Shiba Inu">
 <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" />
</a>
</div>

---
_Source: https://npm.io/package/scriptex-socials · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._