---

Vector share icons as react-components

Installation

1$ npm install --save react-share-icons

Usage

Icon: ReactElement

1import React, {Component} from 'react';
2import Icon, {Telegram} from 'react-share-icons';
3import Instagram from 'react-share-icons/lib/Instagram';
4
5class Shares extends Component {
6  render() {
7    return (
8      <div>
9        <div>
10          <Icon type="Facebook" className="shares-facebook"/>
11          <Icon type="Twitter" className="shares-twitter"/>
12          <Instagram className="shares-instagram"/>
13        </div>
14
15        <a href="https://telegram.org/">
16          <Telegram className="shares-telegram"/>
17        </a>
18      </div>
19    );
20  }
21}
22
23export 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 file in the root of the project, it provides css variables with social colors for you, so you can use sheetify or cssnext:

1@import 'react-share-icons/colors';
2
3.shares-facebook {
4  color: var(--rsi-facebook);
5}

License

MIT © Aleksandr Yakunichev