react-social-icons/dist/component.js

beautiful, easy svg social icons in react

import * as React from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

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,
  fillRule: 'evenodd'
};
const social_svg_g = {
  transition: 'fill 170ms ease-in-out',
  fill: 'transparent'
};
const makeUriRegex = (socials = []) => 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,
    borderRadius: br = '50%',
    ...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) || {};
  const borderRadius = typeof br != 'string' ? '50%' : br;
  return /*#__PURE__*/React.createElement(as, {
    href: href || url,
    className: `social-icon${className ? ` ${className}` : ''}`,
    ...rest,
    style: {
      ...social_icon,
      ...rest.style
    },
    'aria-label': ariaLabel,
    ref
  }, /*#__PURE__*/jsx("span", {
    className: "social-container",
    style: social_container,
    children: /*#__PURE__*/jsxs("svg", {
      role: "img",
      "aria-label": `${ariaLabel} social icon`,
      className: "social-svg",
      viewBox: "0 0 64 64",
      style: {
        ...social_svg,
        borderRadius
      },
      children: [/*#__PURE__*/jsx("g", {
        className: "social-svg-icon",
        style: {
          ...social_svg_g,
          fill: fgColor || 'white'
        },
        children: /*#__PURE__*/jsx("path", {
          d: `M0,0H64V64H0Z${path}`
        })
      }), /*#__PURE__*/jsx("g", {
        className: "social-svg-mask",
        style: {
          ...social_svg_g,
          fill: bgColor || color
        },
        children: /*#__PURE__*/jsx("path", {
          d: path
        })
      })]
    })
  }), children);
});

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