Add Threads Logo (#122)

Automattic · Jul 13, 2023 · d2ca7c5 · d2ca7c5
1 parent 7b36576
commit d2ca7c5
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.4 (2023-07-10)
+* Added Threads icon.
+
 #### v2.5.3 (2023-06-15)
 * Added Fediverse icon.
 * Added Nextdoor icon.

diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ Official guideline resources:
 - Fediverse: https://commons.wikimedia.org/wiki/File:Fediverse_logo_proposal.svg
 - Nextdoor: https://about.nextdoor.com/gb/media/
 - http://findguidelin.es
+- Threads: https://en.wikipedia.org/wiki/File:Threads_(app)_logo.svg
 
 ## Using the SocialLogo Component in your project:
 

diff --git a/codepoints.json b/codepoints.json
@@ -52,5 +52,6 @@
     "link": 61705,
     "mastodon": 61706,
     "fediverse": 61707,
-    "nextdoor": 61708
+    "nextdoor": 61708,
+    "threads": 61709
 }
diff --git a/docs/index.html b/docs/index.html
@@ -476,6 +476,12 @@ <h4>Icon names</h4>
     </svg>
     <p>telegram</p>
   </div>
+  <div>
+    <svg width="24" height="24" class="social-logo threads">
+    <use xlink:href="social-logos.svg#threads" />
+    </svg>
+    <p>threads</p>
+  </div>
   <div>
     <svg width="24" height="24" class="social-logo tiktok-alt">
     <use xlink:href="social-logos.svg#tiktok-alt" />

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.3",
+  "version": "2.5.4",
   "main": "react/index.js",
   "peerDependencies": {
     "react": "15 - 18"

diff --git a/pdf/threads.pdf b/pdf/threads.pdf
diff --git a/php/social-logos.php b/php/social-logos.php
@@ -145,6 +145,9 @@ function get_social_logo( $social_logo ) {
 		case 'telegram':
 			$svg = '<svg class="social-logo social-logo-telegram" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.08 14.757s-.25.625-.936.325l-2.541-1.949-1.63 1.486s-.127.096-.266.036c0 0-.12-.011-.27-.486-.15-.475-.911-2.972-.911-2.972L6 12.349s-.387-.137-.425-.438c-.037-.3.437-.462.437-.462l10.03-3.934s.824-.362.824.238l-1.786 9.004z"/></g></svg>';
 			break;
+		case 'threads':
+			$svg = '<svg class="social-logo social-logo-threads" height="24" width="24" aria-label="Threads" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg"><g><path class="x19hqcy" d="M141.537 88.988a66.667 66.667 0 00-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553zM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.114 3.895-.169 5.79-.169 6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274z"/></g></svg>';
+			break;
 		case 'tiktok-alt':
 			$svg = '<svg class="social-logo social-logo-tiktok-alt" height="24" width="24" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M5 3a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5zm7.531 3h2.053s-.114 2.635 2.85 2.82v2.04s-1.582.099-2.85-.87l.021 4.207a3.804 3.804 0 11-3.802-3.802h.533v2.082a1.73 1.73 0 00-1.922.648 1.727 1.727 0 001.947 2.646 1.73 1.73 0 001.19-1.642L12.53 6z"/></g></svg>';
 			break;

diff --git a/react/example.js b/react/example.js
diff --git a/react/example.jsx b/react/example.jsx
@@ -60,6 +60,7 @@ export default class SocialLogos extends PureComponent {
 				<SocialLogo icon="squarespace" size={ 48 } onClick={ this.handleClick.bind( this, 'squarespace' ) } />
 				<SocialLogo icon="stumbleupon" size={ 48 } onClick={ this.handleClick.bind( this, 'stumbleupon' ) } />
 				<SocialLogo icon="telegram" size={ 48 } onClick={ this.handleClick.bind( this, 'telegram' ) } />
+				<SocialLogo icon="threads" size={ 48 } onClick={ this.handleClick.bind( this, 'threads' ) } />
 				<SocialLogo icon="tiktok-alt" size={ 48 } onClick={ this.handleClick.bind( this, 'tiktok-alt' ) } />
 				<SocialLogo icon="tiktok" size={ 48 } onClick={ this.handleClick.bind( this, 'tiktok' ) } />
 				<SocialLogo icon="tumblr-alt" size={ 48 } onClick={ this.handleClick.bind( this, 'tumblr-alt' ) } />

diff --git a/react/index.js b/react/index.js
diff --git a/react/index.jsx b/react/index.jsx
@@ -160,6 +160,9 @@ export default class SocialLogo extends PureComponent {
 			case 'telegram':
 				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 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.08 14.757s-.25.625-.936.325l-2.541-1.949-1.63 1.486s-.127.096-.266.036c0 0-.12-.011-.27-.486-.15-.475-.911-2.972-.911-2.972L6 12.349s-.387-.137-.425-.438c-.037-.3.437-.462.437-.462l10.03-3.934s.824-.362.824.238l-1.786 9.004z"/></g></svg>;
 				break;
+			case 'threads':
+				svg = <svg className={ iconClass } height={ size } width={ size } onClick={ onClick } { ...otherProps } ariaLabel="Threads" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg"><g><path class="x19hqcy" d="M141.537 88.988a66.667 66.667 0 00-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553zM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.114 3.895-.169 5.79-.169 6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274z"/></g></svg>;
+				break;
 			case 'tiktok-alt':
 				svg = <svg className={ iconClass } height={ size } width={ size } onClick={ onClick } { ...otherProps } width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M5 3a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5zm7.531 3h2.053s-.114 2.635 2.85 2.82v2.04s-1.582.099-2.85-.87l.021 4.207a3.804 3.804 0 11-3.802-3.802h.533v2.082a1.73 1.73 0 00-1.922.648 1.727 1.727 0 001.947 2.646 1.73 1.73 0 001.19-1.642L12.53 6z"/></g></svg>;
 				break;

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

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