react-social-icons/dist/component.js

beautiful, easy svg social icons in react

import * as React from 'react';

const default_key = 'sharethis';
const social_icon = {
  display: 'inline-block',
  width: '50px',
  height: '50px',
  position: 'relative',
  overflow: 'hidden',
  verticalAlign: 'middle'
};
const social_container = {
  position: 'absolute',
  top: '0',
  left: '0',
  width: '100%',
  height: '100%'
};
const social_svg = {
  ...social_container,
  borderRadius: '50%',
  fillRule: 'evenodd'
};
const social_svg_g = {
  transition: 'fill 170ms ease-in-out',
  fill: 'transparent'
};
const makeUriRegex = function () {
  let socials = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  return new RegExp('(?:[/.]|^)($SOCIALS)([.]|$|/)'.replace('$SOCIALS', socials.join('|').replace(/\./gu, '\\.')), 'u');
};
const social_icons = new Map();
const network_names = new Set();
let uri_regex = makeUriRegex();
function getNetworks() {
  return [...network_names];
}

// note: deprecate in v7
function getKeys() {
  return getNetworks();
}
function register(social, icon) {
  social_icons.set(social, icon);
  network_names.add(social);
  uri_regex = makeUriRegex(
  // sort by longest string first
  [...network_names].sort((pre, post) => post.length - pre.length));
  return icon;
}
function networkFor(url) {
  if (!url) {
    return default_key;
  }
  if (url.startsWith('mailto:')) {
    return 'mailto';
  }
  return url.match(uri_regex)?.[1] || default_key;
}
const SocialIcon = /*#__PURE__*/React.forwardRef(function SocialIcon(props, ref) {
  const {
    as = 'a',
    href,
    url,
    network,
    bgColor,
    fgColor,
    className,
    label,
    children,
    fallback,
    defaultSVG,
    ...rest
  } = props;
  const networkKey = network || networkFor(url);
  const ariaLabel = label || props['aria-label'] || networkKey;
  const fallbackIcon = (typeof fallback === 'string' ? social_icons.get(fallback) : fallback || defaultSVG) || social_icons.get(default_key);
  const {
    color,
    path
  } = networkKey === default_key ? fallbackIcon : social_icons.get(networkKey) || {};
  return /*#__PURE__*/React.createElement(as, {
    href: href || url,
    className: `social-icon${className ? ` ${className}` : ''}`,
    ...rest,
    style: {
      ...social_icon,
      ...rest.style
    },
    'aria-label': ariaLabel,
    ref
  }, /*#__PURE__*/React.createElement("span", {
    className: "social-container",
    style: social_container
  }, /*#__PURE__*/React.createElement("svg", {
    role: "img",
    "aria-label": `${ariaLabel} social icon`,
    className: "social-svg",
    viewBox: "0 0 64 64",
    style: social_svg
  }, /*#__PURE__*/React.createElement("g", {
    className: "social-svg-icon",
    style: {
      ...social_svg_g,
      fill: fgColor || 'white'
    }
  }, /*#__PURE__*/React.createElement("path", {
    d: `M0,0H64V64H0Z${path}`
  })), /*#__PURE__*/React.createElement("g", {
    className: "social-svg-mask",
    style: {
      ...social_svg_g,
      fill: bgColor || color
    }
  }, /*#__PURE__*/React.createElement("path", {
    d: path
  })))), children);
});

export { SocialIcon, getKeys, getNetworks, networkFor, network_names, register, social_icons, uri_regex };