Twitter Button Icon to X

[ashikp]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-share@4.4.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-share/lib/TwitterIcon.js b/node_modules/react-share/lib/TwitterIcon.js
index cb6a0e7..cb65331 100644
--- a/node_modules/react-share/lib/TwitterIcon.js
+++ b/node_modules/react-share/lib/TwitterIcon.js
@@ -7,6 +7,6 @@ var createIcon_1 = __importDefault(require("./hocs/createIcon"));
 var TwitterIcon = (0, createIcon_1.default)({
     color: '#00aced',
     networkName: 'twitter',
-    path: 'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z',
+    path: 'M 41.116 18.375 h 4.962 l -10.8405 12.39 l 12.753 16.86 H 38.005 l -7.821 -10.2255 L 21.235 47.625 H 16.27 l 11.595 -13.2525 L 15.631 18.375 H 25.87 l 7.0695 9.3465 z m -1.7415 26.28 h 2.7495 L 24.376 21.189 H 21.4255 z',
 });
 exports.default = TwitterIcon;

This issue body was partially generated by patch-package.

[darl-devOps]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-share@4.4.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-share/lib/TwitterIcon.js b/node_modules/react-share/lib/TwitterIcon.js
index cb6a0e7..cb65331 100644
--- a/node_modules/react-share/lib/TwitterIcon.js
+++ b/node_modules/react-share/lib/TwitterIcon.js
@@ -7,6 +7,6 @@ var createIcon_1 = __importDefault(require("./hocs/createIcon"));
 var TwitterIcon = (0, createIcon_1.default)({
     color: '#00aced',
     networkName: 'twitter',
-    path: 'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z',
+    path: 'M 41.116 18.375 h 4.962 l -10.8405 12.39 l 12.753 16.86 H 38.005 l -7.821 -10.2255 L 21.235 47.625 H 16.27 l 11.595 -13.2525 L 15.631 18.375 H 25.87 l 7.0695 9.3465 z m -1.7415 26.28 h 2.7495 L 24.376 21.189 H 21.4255 z',
 });
 exports.default = TwitterIcon;

This issue body was partially generated by patch-package.

Hi 👋🏽 I was hoping I would see an issue like this. I'm running a WP theme of which the icons are based on this package. How do you advise I update the icons, most especially Twitter to X?

Thanks

[ashikp]

@darl-devOps use post-install and patch packages that will solve the issue. Or you can go to node_modules/react-share/lib/TwitterIcon.js update the svg code

[flogy]

Thanks for the template! I've added the icon color and applied the SVG change to both ES and LIB directories. Here is the full patch:

diff --git a/node_modules/react-share/es/TwitterIcon.js b/node_modules/react-share/es/TwitterIcon.js
index 80c1c3b..1a6f426 100644
--- a/node_modules/react-share/es/TwitterIcon.js
+++ b/node_modules/react-share/es/TwitterIcon.js
@@ -1,7 +1,7 @@
 import createIcon from './hocs/createIcon';
 var TwitterIcon = createIcon({
-    color: '#00aced',
+    color: '#0f1419',
     networkName: 'twitter',
-    path: 'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z',
+    path: 'M 41.116 18.375 h 4.962 l -10.8405 12.39 l 12.753 16.86 H 38.005 l -7.821 -10.2255 L 21.235 47.625 H 16.27 l 11.595 -13.2525 L 15.631 18.375 H 25.87 l 7.0695 9.3465 z m -1.7415 26.28 h 2.7495 L 24.376 21.189 H 21.4255 z',
 });
 export default TwitterIcon;
diff --git a/node_modules/react-share/lib/TwitterIcon.js b/node_modules/react-share/lib/TwitterIcon.js
index cb6a0e7..20e6db5 100644
--- a/node_modules/react-share/lib/TwitterIcon.js
+++ b/node_modules/react-share/lib/TwitterIcon.js
@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var createIcon_1 = __importDefault(require("./hocs/createIcon"));
 var TwitterIcon = (0, createIcon_1.default)({
-    color: '#00aced',
+    color: '#0f1419',
     networkName: 'twitter',
-    path: 'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z',
+    path: 'M 41.116 18.375 h 4.962 l -10.8405 12.39 l 12.753 16.86 H 38.005 l -7.821 -10.2255 L 21.235 47.625 H 16.27 l 11.595 -13.2525 L 15.631 18.375 H 25.87 l 7.0695 9.3465 z m -1.7415 26.28 h 2.7495 L 24.376 21.189 H 21.4255 z',
 });
 exports.default = TwitterIcon;

[nygardk]

Hey, in version 5 there's now XIcon.

[flogy]

@nygardk Thank you very much! Just tested it and it works fine, although there seems to be no explicit XShareButton. Nesting the new XIcon into TwitterShareButton works fine though.