https://github.com/yacodes/react-share-icons

:large_blue_diamond: Vector share icons as react-components
https://github.com/yacodes/react-share-icons

icons react social-buttons

Last synced: about 1 month ago
JSON representation

:large_blue_diamond: Vector share icons as react-components

• Host: GitHub
• URL: https://github.com/yacodes/react-share-icons
• Owner: yacodes
• License: mit
• Created: 2016-03-14T13:18:55.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2019-12-10T19:59:48.000Z (over 5 years ago)
• Last Synced: 2025-03-25T21:02:03.486Z (about 2 months ago)
• Topics: icons, react, social-buttons
• Language: JavaScript
• Homepage:
• Size: 30.3 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Facebook](https://rawgit.com/canvaskisa/react-share-icons/master/src/Facebook/index.svg)

![Dribbble](https://rawgit.com/canvaskisa/react-share-icons/master/src/Dribbble/index.svg)

![Instagram](https://rawgit.com/canvaskisa/react-share-icons/master/src/Instagram/index.svg)

![Odnoklassniki](https://rawgit.com/canvaskisa/react-share-icons/master/src/Odnoklassniki/index.svg)

![Periscope](https://rawgit.com/canvaskisa/react-share-icons/master/src/Periscope/index.svg)

![Twitter](https://rawgit.com/canvaskisa/react-share-icons/master/src/Twitter/index.svg)

![Vkontakte](https://rawgit.com/canvaskisa/react-share-icons/master/src/Vkontakte/index.svg)

![Youtube](https://rawgit.com/canvaskisa/react-share-icons/master/src/Youtube/index.svg)

![Telegram](https://rawgit.com/canvaskisa/react-share-icons/master/src/Telegram/index.svg)

![Google](https://rawgit.com/canvaskisa/react-share-icons/master/src/Google/index.svg)

![Whatsapp](https://rawgit.com/canvaskisa/react-share-icons/master/src/Whatsapp/index.svg)

***

[![NPM version](http://img.shields.io/npm/v/react-share-icons.svg)](https://www.npmjs.org/package/react-share-icons)

[![Travis Build Status](https://travis-ci.org/canvaskisa/react-share-icons.svg)](https://travis-ci.org/canvaskisa/react-share-icons)

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

> Vector share icons as react-components

## Installation

```js

$ npm install --save react-share-icons

```

## Usage

##### Icon: ReactElement

```js

import React, {Component} from 'react';

import Icon, {Telegram} from 'react-share-icons';

import Instagram from 'react-share-icons/lib/Instagram';

class Shares extends Component {

  render() {

    return (

      


        


          

          

          

        


        

          

        

      

    );

  }

}


export default Shares;

```

By default `react-shares-icons` exports `Icon` component, which accepts `type` prop. `type` props is a string – name of the icon you wanna get. You can also import icons like this: `import {Facebook} from 'react-share-icons`.

If you don't want to use all of the icons, you can import them directly like this: `import Facebook from 'react-share-icons/lib/Facebook'`, it will import only Facebook icon component, and nothing else!

All available icons:

- Facebook

- Dribbble

- Instagram

- Odnoklassniki

- Periscope

- Twitter

- Vkontakte

- Youtube

- Telegram

- Google

- Whatsapp

##### Colors.css

You can find [colors.css](colors.css) file in the root of the project, it provides css variables with social colors for you, so you can use [sheetify](https://github.com/sheetify/sheetify) or [cssnext](https://github.com/cssnext/cssnext):

```css

@import 'react-share-icons/colors';

.shares-facebook {

  color: var(--rsi-facebook);

}

```

## License

MIT © [Aleksandr Yakunichev](https://github.com/canvaskisa)