Add X Logo (#126)

Automattic · Sep 15, 2023 · efee0ea · efee0ea
1 parent d2ca7c5
commit efee0ea
Show file tree

Hide file tree

Showing 22 changed files with 55 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 _The versioning refers to the React component build._
 
+#### v2.5.5 (2023-09-15)
+* Added X icon.
+
 #### v2.5.4 (2023-07-10)
 * Added Threads icon.
 

diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ Official guideline resources:
 - Nextdoor: https://about.nextdoor.com/gb/media/
 - http://findguidelin.es
 - Threads: https://en.wikipedia.org/wiki/File:Threads_(app)_logo.svg
+- X: https://about.twitter.com/en/who-we-are/brand-toolkit
 
 ## Using the SocialLogo Component in your project:
 

diff --git a/codepoints.json b/codepoints.json
@@ -53,5 +53,6 @@
     "mastodon": 61706,
     "fediverse": 61707,
     "nextdoor": 61708,
-    "threads": 61709
+    "threads": 61709,
+    "x": 61710
 }
diff --git a/docs/index.html b/docs/index.html
@@ -548,6 +548,12 @@ <h4>Icon names</h4>
     </svg>
     <p>wordpress</p>
   </div>
+  <div>
+    <svg width="24" height="24" class="social-logo x">
+    <use xlink:href="social-logos.svg#x" />
+    </svg>
+    <p>x</p>
+  </div>
   <div>
     <svg width="24" height="24" class="social-logo xanga">
     <use xlink:href="social-logos.svg#xanga" />

diff --git a/docs/social-logos.svg b/docs/social-logos.svg
diff --git a/icon-font/social-logos.css b/icon-font/social-logos.css
diff --git a/icon-font/social-logos.html b/icon-font/social-logos.html
diff --git a/icon-font/social-logos.ttf b/icon-font/social-logos.ttf
diff --git a/icon-font/social-logos.woff2 b/icon-font/social-logos.woff2
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "social-logos",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "main": "react/index.js",
   "peerDependencies": {
     "react": "15 - 18"

diff --git a/pdf/x.pdf b/pdf/x.pdf
diff --git a/php/social-logos.php b/php/social-logos.php
@@ -181,6 +181,9 @@ function get_social_logo( $social_logo ) {
 		case 'wordpress':
 			$svg = '<svg class="social-logo social-logo-wordpress" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12.158 12.786L9.46 20.625a8.984 8.984 0 005.526-.144.852.852 0 01-.065-.124l-2.763-7.571zM3.009 12a8.993 8.993 0 005.067 8.092L3.788 8.341A8.952 8.952 0 003.009 12zm15.06-.454c0-1.112-.399-1.881-.741-2.48-.456-.741-.883-1.368-.883-2.109 0-.826.627-1.596 1.51-1.596.04 0 .078.005.116.007A8.963 8.963 0 0012 3.009a8.982 8.982 0 00-7.512 4.052c.211.007.41.011.579.011.94 0 2.396-.114 2.396-.114.484-.028.541.684.057.741 0 0-.487.057-1.029.085l3.274 9.739 1.968-5.901-1.401-3.838c-.484-.028-.943-.085-.943-.085-.485-.029-.428-.769.057-.741 0 0 1.484.114 2.368.114.94 0 2.397-.114 2.397-.114.485-.028.542.684.057.741 0 0-.488.057-1.029.085l3.249 9.665.897-2.996c.456-1.169.684-2.137.684-2.907zm1.82-3.86c.039.286.06.593.06.924 0 .912-.171 1.938-.684 3.22l-2.746 7.94a8.984 8.984 0 004.47-7.771 8.922 8.922 0 00-1.1-4.313zM12 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10z"/></g></svg>';
 			break;
+		case 'x':
+			$svg = '<svg class="social-logo social-logo-x" height="24" width="24" aria-label="Threads" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M14.117 9.622L20.446 2h-1.5l-5.495 6.618L9.062 2H4l6.637 10.007L4 20h1.5l5.803-6.989L15.938 20H21L14.117 9.622zm-2.054 2.474l-.672-.997-5.35-7.93h2.303l4.318 6.4.672.996 5.613 8.319h-2.304l-4.58-6.788z"/></g></svg>';
+			break;
 		case 'xanga':
 			$svg = '<svg class="social-logo social-logo-xanga" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 9h6v6H9V9zM3 9h6V3H3v6zm12 0h6V3h-6v6zm0 12h6v-6h-6v6zM3 21h6v-6H3v6z"/></g></svg>';
 			break;

diff --git a/react/example.js b/react/example.js
diff --git a/react/example.jsx b/react/example.jsx
@@ -72,6 +72,7 @@ export default class SocialLogos extends PureComponent {
 				<SocialLogo icon="whatsapp" size={ 48 } onClick={ this.handleClick.bind( this, 'whatsapp' ) } />
 				<SocialLogo icon="woocommerce" size={ 48 } onClick={ this.handleClick.bind( this, 'woocommerce' ) } />
 				<SocialLogo icon="wordpress" size={ 48 } onClick={ this.handleClick.bind( this, 'wordpress' ) } />
+				<SocialLogo icon="x" size={ 48 } onClick={ this.handleClick.bind( this, 'x' ) } />
 				<SocialLogo icon="xanga" size={ 48 } onClick={ this.handleClick.bind( this, 'xanga' ) } />
 				<SocialLogo icon="youtube" size={ 48 } onClick={ this.handleClick.bind( this, 'youtube' ) } />
 			</div>

diff --git a/react/index.js b/react/index.js
diff --git a/react/index.jsx b/react/index.jsx
@@ -196,6 +196,9 @@ export default class SocialLogo extends PureComponent {
 			case 'wordpress':
 				svg = <svg className={ iconClass } height={ size } width={ size } onClick={ onClick } { ...otherProps } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12.158 12.786L9.46 20.625a8.984 8.984 0 005.526-.144.852.852 0 01-.065-.124l-2.763-7.571zM3.009 12a8.993 8.993 0 005.067 8.092L3.788 8.341A8.952 8.952 0 003.009 12zm15.06-.454c0-1.112-.399-1.881-.741-2.48-.456-.741-.883-1.368-.883-2.109 0-.826.627-1.596 1.51-1.596.04 0 .078.005.116.007A8.963 8.963 0 0012 3.009a8.982 8.982 0 00-7.512 4.052c.211.007.41.011.579.011.94 0 2.396-.114 2.396-.114.484-.028.541.684.057.741 0 0-.487.057-1.029.085l3.274 9.739 1.968-5.901-1.401-3.838c-.484-.028-.943-.085-.943-.085-.485-.029-.428-.769.057-.741 0 0 1.484.114 2.368.114.94 0 2.397-.114 2.397-.114.485-.028.542.684.057.741 0 0-.488.057-1.029.085l3.249 9.665.897-2.996c.456-1.169.684-2.137.684-2.907zm1.82-3.86c.039.286.06.593.06.924 0 .912-.171 1.938-.684 3.22l-2.746 7.94a8.984 8.984 0 004.47-7.771 8.922 8.922 0 00-1.1-4.313zM12 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10z"/></g></svg>;
 				break;
+			case 'x':
+				svg = <svg className={ iconClass } height={ size } width={ size } onClick={ onClick } { ...otherProps } ariaLabel="Threads" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M14.117 9.622L20.446 2h-1.5l-5.495 6.618L9.062 2H4l6.637 10.007L4 20h1.5l5.803-6.989L15.938 20H21L14.117 9.622zm-2.054 2.474l-.672-.997-5.35-7.93h2.303l4.318 6.4.672.996 5.613 8.319h-2.304l-4.58-6.788z"/></g></svg>;
+				break;
 			case 'xanga':
 				svg = <svg className={ iconClass } height={ size } width={ size } onClick={ onClick } { ...otherProps } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 9h6v6H9V9zM3 9h6V3H3v6zm12 0h6V3h-6v6zm0 12h6v-6h-6v6zM3 21h6v-6H3v6z"/></g></svg>;
 				break;

diff --git a/sources/svg/x.svg b/sources/svg/x.svg
diff --git a/svg-min-react/x.svg b/svg-min-react/x.svg
diff --git a/svg-min/x.svg b/svg-min/x.svg
diff --git a/svg-sprite/index.html b/svg-sprite/index.html
@@ -548,6 +548,12 @@ <h4>Icon names</h4>
     </svg>
     <p>wordpress</p>
   </div>
+  <div>
+    <svg width="24" height="24" class="social-logo x">
+    <use xlink:href="social-logos.svg#x" />
+    </svg>
+    <p>x</p>
+  </div>
   <div>
     <svg width="24" height="24" class="social-logo xanga">
     <use xlink:href="social-logos.svg#xanga" />

diff --git a/svg-sprite/social-logos.svg b/svg-sprite/social-logos.svg