react-share-icons

Vector share icons as react-components

Installation

$ npm install --save react-share-icons

Usage

Icon: ReactElement

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 (
      <div>
        <div>
          <Icon type="Facebook" className="shares-facebook"/>
          <Icon type="Twitter" className="shares-twitter"/>
          <Instagram className="shares-instagram"/>
        </div>
 
        <a href="https://telegram.org/">
          <Telegram className="shares-telegram"/>
        </a>
      </div>
    );
  }
}
 
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 file in the root of the project, it provides css variables with social colors for you, so you can use sheetify or cssnext:

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

License

MIT © Aleksandr Yakunichev