https://github.com/polydile/social-icon
Web component to display social icons, based on LitElement
https://github.com/polydile/social-icon
Last synced: about 1 year ago
JSON representation
Web component to display social icons, based on LitElement
- Host: GitHub
- URL: https://github.com/polydile/social-icon
- Owner: Polydile
- License: mit
- Created: 2019-05-06T16:11:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T03:56:40.000Z (over 3 years ago)
- Last Synced: 2024-04-27T13:19:32.045Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 2.71 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved
**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
# dile-social-icon
Web component to display icons from the main social networks and communities, based on LitElement.
Go to [DEMO page](https://dile-social-icon.polydile.com)!
## Usage
1) Install the npm package
```bash
npm i social-icon
```
2) Include the script of the component in your web page or application
```html
import 'social-icon/dile-social-icon.js';
```
3) Use the web component
```html
```
The icon property is used to set the icon you want to show. There are icons from the main social networks and services.
## Icons available
The icon property accepts the social icons listed bellow:
- facebook
- google
- twitter
- pinterest
- linkedin
- youtube
- whatsapp
- instagram
- gmail
- snapchat
- github
Note that the name of the icon is allways in lowercase.
## Custom styles
You can customize the icon styles using CSS Custom Styles.
Custom property | Description | Default
----------------|-------------|---------
--dile-social-icon-color | Icon color | #888
--dile-social-icon-size | Icon size (this sets width & height to the same value) | 24px