Social Icon Bar

A custom web component for displaying a bar of social media icons.

Usage

NPM

To install the package, run the following command:

npm install @allensulzen/social-icon-bar

Then import the package into your project:

import 'social-icon-bar';

CDN

To use the package via CDN, include the following script tag in your HTML file:

<script src="https://unpkg.com/@allensulzen/social-icon-bar"></script>

Properties

| Attribute | Description | Default | |-----------|-------------|---------| | icons | JSON string of icons to display. | None | | prefix | Icon prefix. | bxl | | backgroundColor | Background color of the icon bar. | black | | iconColor | Color of the icon. | white | | align | Alignment of the icon bar. | center | | position | Position of the icon bar. | top | | iconHoverColor | Hover color of the icon. | skyblue | | iconSize | Size of the icon. | 1.5rem |

Slots

| Slot | Description | |------|-------------| | before | Slot for content before the icons. | | after | Slot for content after the icons. |

Events

| Event | Description | |-------|-------------| | socialIconBarRender | Event fired when the component renders. |

Usage

<social-icon-bar
    icons='[{"site":"facebook", "url":"https://facebook.com"}, {"site":"twitter", "url":"https://twitter.com"}]'
    prefix="bxl"
    backgroundColor="black"
    iconColor="white"
    align-icons="center"
    position="top"
    iconHoverColor="skyblue"
    iconSize="1.5rem"
>
    <div slot="before">Content before the icons</div>
    <div slot="after">Content after the icons</div>
</social-icon-bar>