react-social-icons - npm Package Compare versions

Comparing version 5.15.0 to 6.0.0-beta.8

LICENSE.md

 # The MIT License (MIT)
 
+Copyright (c) 2023 Connor Couetil
 Copyright (c) 2016 Vitaly Aminev
@@ -22,2 +23,2 @@ Copyright (c) 2015 Jake Trent
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

package.json

 {
   "name": "react-social-icons",
-  "version": "5.15.0",
+  "version": "6.0.0-beta.8",
   "description": "beautiful, easy svg social icons in react",
-  "main": "./build/react-social-icons.js",
-  "types": "./build/react-social-icons.d.ts",
-  "scripts": {
-    "build": "babel --copy-files -d ./build ./src",
-    "build:watch": "npm run build -- --watch",
-    "examples:serve": "parcel examples/index.html",
-    "examples:build": "parcel build examples/index.html",
-    "lint": "eslint src",
-    "prepublish": "NODE_ENV=production npm run build",
-    "start": "npm run examples:serve",
-    "test": "npm run lint && npm run test:js && npm run test:ts",
-    "test:watch": "npm run test:js -- --watch",
-    "test:ts": "npx tsc --jsx react --noEmit --strict --esModuleInterop test/SocialIcon.tsx",
-    "test:js": "mocha",
-    "bundlesize": "npm run prepublish && tar -c build | gzip > build.tar.gz && du -h build build.tar.gz"
+  "main": "./dist/react-social-icons.cjs",
+  "module": "./dist/react-social-icons.js",
+  "types": "./dist/react-social-icons.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "types": "./dist/react-social-icons.d.ts",
+    "component": "./dist/component.js",
+    "bandsintown": "./dist/icons/bandsintown.js",
+    "behance": "./dist/icons/behance.js",
+    "clubhouse": "./dist/icons/clubhouse.js",
+    "codepen": "./dist/icons/codepen.js",
+    "discord": "./dist/icons/discord.js",
+    "dribbble": "./dist/icons/dribbble.js",
+    "dropbox": "./dist/icons/dropbox.js",
+    "email": "./dist/icons/email.js",
+    "facebook": "./dist/icons/facebook.js",
+    "fivehundredpix": "./dist/icons/fivehundredpix.js",
+    "flickr": "./dist/icons/flickr.js",
+    "foursquare": "./dist/icons/foursquare.js",
+    "github": "./dist/icons/github.js",
+    "gitlab": "./dist/icons/gitlab.js",
+    "google": "./dist/icons/google.js",
+    "google_play": "./dist/icons/google_play.js",
+    "groupme": "./dist/icons/groupme.js",
+    "instagram": "./dist/icons/instagram.js",
+    "itch.io": "./dist/icons/itch.io.js",
+    "itunes": "./dist/icons/itunes.js",
+    "leetcode": "./dist/icons/leetcode.js",
+    "linkedin": "./dist/icons/linkedin.js",
+    "linktree": "./dist/icons/linktree.js",
+    "mailto": "./dist/icons/mailto.js",
+    "mastodon": "./dist/icons/mastodon.js",
+    "matrix": "./dist/icons/matrix.js",
+    "medium": "./dist/icons/medium.js",
+    "meetup": "./dist/icons/meetup.js",
+    "opensea": "./dist/icons/opensea.js",
+    "pinterest": "./dist/icons/pinterest.js",
+    "pixiv": "./dist/icons/pixiv.js",
+    "ravelry": "./dist/icons/ravelry.js",
+    "rdio": "./dist/icons/rdio.js",
+    "reddit": "./dist/icons/reddit.js",
+    "rss": "./dist/icons/rss.js",
+    "sharethis": "./dist/icons/sharethis.js",
+    "slack": "./dist/icons/slack.js",
+    "smugmug": "./dist/icons/smugmug.js",
+    "snapchat": "./dist/icons/snapchat.js",
+    "soundcloud": "./dist/icons/soundcloud.js",
+    "spotify": "./dist/icons/spotify.js",
+    "squarespace": "./dist/icons/squarespace.js",
+    "stackoverflow": "./dist/icons/stackoverflow.js",
+    "t.me": "./dist/icons/t.me.js",
+    "telegram": "./dist/icons/telegram.js",
+    "tiktok": "./dist/icons/tiktok.js",
+    "tumblr": "./dist/icons/tumblr.js",
+    "twitch": "./dist/icons/twitch.js",
+    "twitter": "./dist/icons/twitter.js",
+    "upwork": "./dist/icons/upwork.js",
+    "vevo": "./dist/icons/vevo.js",
+    "vimeo": "./dist/icons/vimeo.js",
+    "vine": "./dist/icons/vine.js",
+    "vk": "./dist/icons/vk.js",
+    "vsco": "./dist/icons/vsco.js",
+    "wechat": "./dist/icons/wechat.js",
+    "whatsapp": "./dist/icons/whatsapp.js",
+    "x": "./dist/icons/x.js",
+    "yelp": "./dist/icons/yelp.js",
+    "youtube": "./dist/icons/youtube.js"
   },
-  "author": "jaketrent",
+  "author": "couetilc",
   "license": "MIT",
   "contributors": [
-    "Vitaly Aminev <[e-mail]>"
+    "Connor Couetil <[e-mail]>",
+    "Vitaly Aminev <[e-mail]>",
+    "Jake Trent <[e-mail]>"
   ],
+  "homepage": "https://react-social-icons.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/jaketrent/react-social-icons"
+    "url": "https://github.com/couetilc/react-social-icons"
   },
+  "peerDependencies": {
+    "react": "15.x.x || 16.x.x || 17.x.x || 18.x.x",
+    "react-dom": "15.x.x || 16.x.x || 17.x.x || 18.x.x"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "@types/react": "^17.0.4",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
-    "eslint": "^7.26.0",
-    "eslint-plugin-react": "^7.23.2",
-    "mocha": "^5.2.0",
-    "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.11.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "should": "^13.2.3",
-    "typescript": "^4.2.4"
+    "@babel/core": "^7.22.11",
+    "@babel/plugin-transform-runtime": "^7.22.10",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/parser": "^6.5.0",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "global-jsdom": "^9.1.0",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.0.3",
+    "publint": "^0.2.2",
+    "rollup": "^3.28.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3",
+    "wrangler": "^3.6.0"
   },
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "@babel/runtime": "^7.22.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "peerDependencies": {
-    "react": "15.x.x || 16.x.x || 17.x.x || 18.x.x"
+  "packageManager": "pnpm@8.6.6",
+  "scripts": {
+    "build": "./cli build",
+    "bundlesize": "./cli info:bundlesize",
+    "dev": "./cli dev",
+    "lint": "pnpm test:lint && pnpm test:publint",
+    "start": "./cli dev",
+    "test": "./cli test:",
+    "test:unit": "./cli test:unit",
+    "test:lint": "./cli test:lint",
+    "test:publint": "./cli test:publint",
+    "test:ts": "./cli test:ts",
+    "test:codesplitting": "./cli test:codesplitting"
   }
-}
+}

README.md

@@ -1,7 +0,14 @@
-# react-social-icons   ![build status](https://img.shields.io/github/workflow/status/jaketrent/react-social-icons/Build,%20Test,%20Publish/master) ![package version](https://img.shields.io/npm/v/react-social-icons) ![package size](https://img.shields.io/bundlephobia/minzip/react-social-icons) ![weekly downloads](https://img.shields.io/npm/dw/react-social-icons) ![type definitions](https://img.shields.io/npm/types/react-social-icons)
+# react-social-icons
 
-A set of beautiful svg social icons.  Easily used in React.  No images or external css dependencies.  Svg paths provided by Squarespace.
+![build status](https://img.shields.io/github/actions/workflow/status/couetilc/react-social-icons/build_test_publish.yml?branch=master)
+![package version](https://img.shields.io/npm/v/react-social-icons)
+![package size](https://img.shields.io/bundlephobia/minzip/react-social-icons)
+![weekly downloads](https://img.shields.io/npm/dw/react-social-icons)
+![type definitions](https://img.shields.io/npm/types/react-social-icons)
 
-![social network icons](https://i.imgur.com/OrNeTND.png)
+A set of beautiful svg social icons. Easily used in React. No images or
+external css dependencies. [Example](https://react-social-icons.com)
 
+![the social networks configured in this library are](/couetilc/react-social-icons/blob/gh-pages/$filename)
+
 ## Install
@@ -11,2 +18,4 @@
 npm install react-social-icons
+yarn add react-social-icons
+pnpm add react-social-icons
 ```
@@ -19,19 +28,45 @@
 ```js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { SocialIcon } from 'react-social-icons';
-ReactDOM.render(<SocialIcon url="https://twitter.com/jaketrent" />, document.body);
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { SocialIcon } from 'react-social-icons'
+
+const Component = <SocialIcon url="https://twitter.com" />
+// React v16
+ReactDOM.render(Component, document.body)
+// React v17+
+ReactDOM.createRoot(document.body).render(Component)
 ```
 
-See more [usage options on the example site](https://jaketrent.github.io/react-social-icons/).
+See more [usage options on the example site](https://react-social-icons.com).
 
 This library supports [TypeScript](https://www.typescriptlang.org/) since v5.2.0.
-([type declarations](https://github.com/jaketrent/react-social-icons/blob/master/src/react-social-icons.d.ts))
+([type declarations](https://github.com/couetilc/react-social-icons/blob/main/src/react-social-icons.d.ts))
 
-## Prop Types
+### Code Splitting and Tree Shaking
 
+Reduce the size of bundled code from this library by importing the `SocialIcon`
+component directly and only importing the icons you need. Bundled code using
+only one icon will be 20 times smaller, or about 5% of the full library's size
+(from 26.3kb for all icons to as small as 1.5kb for one icon). The size of the
+bundled library will scale linearly with each icon you import. Many bundlers
+will tree shake the unused icons from the final code-split bundle.
+
+```js
+import { SocialIcon } from 'react-social-icons/component'
+import 'react-social-icons/vimeo'
+import 'react-social-icons/meetup'
+// renders: vimeo icon
+<SocialIcon url="www.vimeo.com" />
+// renders: meetup icon
+<SocialIcon url="www.meetup.com" />
+// renders: default icon
+<SocialIcon url="www.pinterest.com" />
+```
+
+## Props
+
 | Property   | Type   | Required | Description |
 | :--------- | :----- | :------: | :---------- |
 | url        | String | No       | The rendered component will link to this url and show the social network's icon.
-| network    | String | No       | Override which network icon to render (defaults to the url's social network)
+| network    | String | No       | Override which network icon to render 
 | bgColor    | String | No       | Override the background fill color (defaults to social network's color)
@@ -41,78 +76,206 @@ | fgColor    | String | No       | Override the icon's fill color (defaults to transparent)
 | className  | String | No       | Specify a class to attach to the rendered anchor tag
-| defaultSVG | Object | No       | Override the default icon for when a url is not matched to a social network. Requires string properties `icon`, `mask`, and `color`. (defaults to network `'sharethis'`)
-| style      | Object | No       | Override style properties passed to the rendered anchor tag |
+| style      | Object | No       | Override style properties passed to the rendered anchor tag
+| href      | String | No       | Override the link while keeping the icon matching prop `url`
+| as      | String | No       | Override the root element of the component (defaults to 'a')
+| fallback | String | No | Specify the icon shown when no network matches the `url` prop
 
-## Contributing
+### `url`
 
-### How to add new icons
+Sets the link the anchor element points to and renders the icon associated
+with the network matching the `url`.
 
-Icons are stored in `src\_networks-db.js`
+```js
+// renders: vimeo.com
+<SocialIcon url="www.vimeo.com" />
+```
 
-For example:
+### `network`
 
+Overrides the icon rendered by the component.
+
+```js
+// renders: github icon
+<SocialIcon network="github" />
+
+// renders: github icon
+// on click: navigate to vimeo.com
+<SocialIcon network="github" url="www.vimeo.com" />
 ```
-facebook: {
-  icon:
-    'M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z',
-  mask:
-    'M0,0v64h64V0H0z M39.6,22l-2.8,0c-2.2,0-2.6,1.1-2.6,2.6V28h5.3l-0.7,5.3h-4.6V47h-5.5V33.3H24V28h4.6V24 c0-4.6,2.8-7,6.9-7c2,0,3.6,0.1,4.1,0.2V22z',
-  color: '#3b5998'
-},
+
+### `bgColor` and `fgColor`
+
+Overrides the background or foreground fill colors. Defaults to the network's
+brand color (bg) and transparent (fg).
+
+```js
+// renders: default icon
+<SocialIcon bgColor="green" fgColor="blue" />
 ```
 
-To add a new icon, you first need to find a copy of that icon as an svg file,
-and a hex code for the social network's main color.  Check the network's own
-style guidelines or website for the official icon and color.
+### `label`
 
-The 'icon' and 'mask' properties for each network in `networks-db.js` should
-contain the vector information for the svg.  The 'icon' is the foreground, so
-the path for describes the shape of the icon itself. This will be transparent
-by default.  The 'mask' is the background area, so the path for this describes
-the area between the surrounding circle and the icon shape. By default this
-will take the color you provide in the 'color' property.  The 'color' property
-will set the background color for the icon. This should be the main color
-associated with the social network.
+Overrides the ARIA attribute on the anchor element. Defaults to network name.
 
-An easy way to generate the path for the 'mask' is to begin with
-'M0,0v64h64V0H0z', which defines the circular border, and follow this with the
-exact same path that you used for the 'icon'.
+```js
+// renders: vimeo icon
+<SocialIcon label="my video channel" url="www.vimeo.com" />
+// or
+<SocialIcon aria-label="my video channel" url="www.vimeo.com" />
+```
 
-Depending on the svg file that you start with, you may need to edit attributes
-in the svg file such as width, height, and viewbox (see
-https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial) in order to put the
-icon in the centre of the circular border. You can then use a tool such as
-https://www.iloveimg.com/resize-image to rewrite the svg path so you have a
-nice simple path to use here in the 'icon' and 'mask', without needing those
-extra attributes.
+### `className` and `style`
 
-### Using Inkscape
+Specify a CSS class and styles for the anchor element. [Read more about these
+special React props.](https://legacy.reactjs.org/docs/faq-styling.html)
 
-These steps should work for most logos. Feel free to tweak any of the steps to
-make the final svg look neater:
+```js
+<SocialIcon className="colorscheme" style={{ color: 'green' }} />
+```
 
-1. Open the SVG in Inkscape's editor and select `File > Document Properties` in
-   the menu bar.  Change the page's width and height to 64px.
-2. Select the icon and click `Object > Transform` in the menu bar. Choose the
-   "Scale" tab, check the box "Scale proportionally", set the height and width
-   to be within 32px, and click the "Apply" button
-3. Select the icon and click `Object > Align and Distribute` in the menu bar.
-   Set relative to "Page" in the dropdown menu and click the buttons "Center on
-   vertical axis" and "Center on horizontal axis".
-4. Create a square starting at the origin with a width of 64px. Select
-   `Object > Lower to Bottom` in the menu. Select `Path > Object to Path` in
-   the menu.
-5. Select both the square and icon. Click `Path > Exclusion` in the menu. You
-   must convert all objects to paths and remove all groups before you can
-   perform the Exclusion operation.
-6. Select `File > Save a Copy` in the menu. Open the saved svg file in a text
-   editor, find the `path` element, and copy the `d` attribute's value.
-7. In the `react-social-icons` repository, open the `src/_networks-db.js` file
-   and add a new entry in the object whose key has the same name as the social
-   network's domain name. Set the property `icon` to `"M 0,0 H 64 V 64 H 0 Z"`.
-   Set the property `mask` to the copied value from Step 6. Set the property
-   `color` to the social network's brand color.
-8. Commit your changes and preview the new icon by running `npm start` and
-   visiting `http://localhost:1234` in your web browser. Once you're happy with
-   the result, create a PR against master at
-   https://github.com/jaketrent/react-social-icons, where it will be reviewed
-   and merged. Thank you for contributing!
+### `href`
+
+Overrides the anchor link. Ignored when the component decides what icon to
+render.
+
+```js
+// renders: default icon
+// on click: navigate to github.com
+<SocialIcon href="www.github.com" />
+```
+
+`href` specifies the anchor link while `url` specifies the rendered icon
+
+```js
+// renders: vimeo icon
+// on click: navigate to github.com
+<SocialIcon href="www.github.com" url="www.vimeo.com" />
+```
+
+### `as`
+
+Set `<SocialIcon>` to be any html element you want. Defaults to 'a'.
+
+```js
+<SocialIcon as="div" />
+```
+
+### `fallback`
+
+Overrides the default icon shown when a network does not match the given URL.
+
+Accepts a network:
+
+```js
+<SocialIcon fallback="pinterest" /> // renders pinterest icon
+```
+
+Or an icon definition:
+
+```js
+<SocialIcon fallback={{ color, path }} /> // renders custom icon
+```
+
+## The other exports
+
+There are other useful functions and objects exported from the
+SocialIcon library.
+
+### `networkFor`
+
+A function that accepts a url string and returns the matching social network
+domain name.
+
+```js
+import { networkFor } from 'react-social-icons';
+import { assert } from 'assert'
+assert.equal(networkFor('https://www.pinterest.com'), 'pinterest')
+```
+
+### `register`
+
+A function that accepts the domain name of a social network with an object
+definition of the icon's paths and color. It will register the social network
+icon with the `<SocialIcon>` component, which will have gained the ability to
+render the icon for your social network, and update `uri_regex` to match the
+domain name.
+
+```js
+import { register } from 'react-social-icons';
+register('mynetwork', {
+  color: 'red',
+  path: 'path commands' // see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands
+})
+```
+
+### `social_icons`
+
+A map that associates social network names to the icon objects with the
+network's color and icon paths.
+
+```js
+import { social_icons } from 'react-social-icons'
+import assert from 'assert'
+assert.ok(social_icons instanceof Map)
+```
+
+### `network_names` and `getKeys`
+
+`network_names` is a set that stores all the registered social network domain
+names. `getKeys` returns an array of the same information.
+
+```js
+import { network_names, getKeys } from 'react-social-icons'
+import assert from 'assert'
+assert.deepEqual(getKeys(), [...network_names])
+assert.ok(network_names instanceof Set)
+```
+
+### `uri_regex`
+
+A regex for urls that will match any social network domain names that are
+registered. (this will not match `mailto:` links or return the default network,
+use `networkFor` instead)
+
+```js
+import { uri_regex } from 'react-social-icons'
+import assert from 'assert'
+assert.equal(uri_regex.exec('https://www.pinterest.com')?.[1], 'pinterest')
+```
+
+## Contributing
+
+Contributors are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## FAQ
+
+### How do I open the link in a new tab when the icon is clicked?
+
+Pass the prop `target` like so: `<SocialIcon target="_blank"
+url="www.vimeo.com" />`. All props are forwarded to the underlying element, [an
+anchor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
+
+### How do I use code-splitting?
+
+This package packages exposes the component code and icon definitions in
+separate files with a simple import interface. There are several useful tools
+that implement features like tree-shaking to reduce the size of bundled code.
+Certain browsers contain features that let you important un-bundled code
+directly. An effort has been made to keep distribution code files simple,
+separate, and small.
+
+#### with ES6 browser imports
+
+[Refer to a list of compatible
+browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+and import files directly from your own servers or [a
+CDN](https://www.jsdelivr.com/).
+
+#### with a bundler
+
+[Webpack](https://webpack.js.org/guides/tree-shaking/) and
+[Rollup](https://rollupjs.org/introduction/#tree-shaking) will tree shake any
+unused code from this package when you are bundling your code.
+
+### How do I add a new icon?
+
+Follow the instructions in [CONTRIBUTING.md](CONTRIBUTING.md).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of package files

69

increased by46.81%

Number of lines in readme file

279

increased by140.52%

Is type module

Yes

Worsened metrics

Total package byte prevSize

232305

decreased by-98.69%

Dependency count

5

increased by150%

Dev dependency count

27

increased by58.82%

Lines of code

1527

decreased by-22.8%

Number of low supply chain risk alerts

54

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@^7.22.11

• + Addedreact@^18.2.0

• + Addedreact-dom@^18.2.0

• + Added@babel/runtime@7.26.0(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedprop-types@^15.7.2

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)