This should be the main colorĪn easy way to generate the path for the 'mask' is to begin with Will set the background color for the icon. Will take the color you provide in the 'color' property.

The area between the surrounding circle and the icon shape. The 'mask' is the background area, so the path for this describes The path for describes the shape of the icon itself. The 'icon' and 'mask' properties for each network in networks-db.js shouldĬontain the vector information for the svg. Style guidelines or website for the official icon and color. To add a new icon, you first need to find a copy of that icon as an svg file,Īnd a hex code for the social network's main color.

Override style properties passed to the rendered anchor tag Requires string properties icon, mask, and color. Override the default icon for when a url is not matched to a social network. Specify a class to attach to the rendered anchor tag Set the aria-label attribute on the rendered anchor tag (defaults to the social network's name) Override the icon's fill color (defaults to transparent) Override the background fill color (defaults to social network's color) Override which network icon to render (defaults to the url's social network) The rendered component will link to this url and show the social network's icon. This library supports TypeScript since v5.2.0. See more usage options on the example site. Import React from 'react' import ReactDOM from 'react-dom' import from 'react-social-icons' ReactDOM.

Social media icons svg free download