Update social-logos imports from default to named (#40816)

* Update social-logos import from default to named

* Add changelog

projects/js-packages/components/changelog/update-social-logo-usage

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated social-logos import from default to named

projects/js-packages/components/components/icons/index.tsx

@@ -1,6 +1,6 @@
 import { Path, SVG, G, Polygon } from '@wordpress/components';
 import clsx from 'clsx';
-import SocialLogo from 'social-logos';
+import { SocialLogo } from 'social-logos';
 import styles from './style.module.scss';
 import { BaseIconProps } from './types';
 import type React from 'react';

projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import SocialLogo from 'social-logos';
+import { SocialLogo } from 'social-logos';
 import ConnectionBanner from 'components/connection-banner';
 import NoticesList from 'components/global-notices';
 import SimpleNotice from 'components/notice';

projects/plugins/jetpack/_inc/client/traffic/seo.jsx

@@ -8,7 +8,7 @@ import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import SocialLogo from 'social-logos';
+import { SocialLogo } from 'social-logos';
 import Button from 'components/button';
 import FoldableCard from 'components/foldable-card';
 import { FormLabel, FormTextarea } from 'components/forms';

projects/plugins/jetpack/changelog/update-social-logo-usage

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated social-logos import from default to named

projects/plugins/jetpack/extensions/blocks/sharing-button/edit.js

@@ -1,7 +1,7 @@
 import { useBlockProps } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import clsx from 'clsx';
-import SocialIcon from 'social-logos';
+import { SocialLogo } from 'social-logos';
 import { getNameBySite } from './utils';
 import './style.scss';
 
@@ -31,7 +31,7 @@ const SharingButtonEdit = ( { attributes, context } ) => {
 		<>
 			<li { ...blockProps }>
 				<Button className={ sharingButtonClass } style={ buttonStyle }>
-					<SocialIcon icon={ service } size={ 24 } />
+					<SocialLogo icon={ service } size={ 24 } />
 					<span className={ 'jetpack-sharing-button__service-label' }>{ socialLinkLabel }</span>
 				</Button>
 			</li>

projects/plugins/jetpack/extensions/blocks/sharing-button/variations.js

@@ -1,12 +1,12 @@
 import { __ } from '@wordpress/i18n';
-import SocialIcon from 'social-logos';
+import { SocialLogo } from 'social-logos';
 
 export const variations = [
 	{
 		name: 'bluesky',
 		attributes: { service: 'bluesky', label: 'Bluesky' },
 		title: 'Bluesky',
-		icon: <SocialIcon icon={ 'bluesky' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'bluesky' } size={ 24 } />,
 	},
 	{
 		name: 'print',
@@ -17,20 +17,20 @@ export const variations = [
 		},
 		// translators: option to print the content - a verb labelling a button.
 		title: __( 'Print', 'jetpack' ),
-		icon: <SocialIcon icon={ 'print' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'print' } size={ 24 } />,
 	},
 	{
 		name: 'facebook',
 		attributes: { service: 'facebook', label: 'Facebook' },
 		title: 'Facebook',
-		icon: <SocialIcon icon={ 'facebook' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'facebook' } size={ 24 } />,
 	},
 	{
 		name: 'linkedin',
 		attributes: { service: 'linkedin', label: 'LinkedIn' },
 		title: 'LinkedIn',
 		isDefault: true,
-		icon: <SocialIcon icon={ 'linkedin' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'linkedin' } size={ 24 } />,
 	},
 	{
 		name: 'mail',
@@ -42,75 +42,75 @@ export const variations = [
 		// translators: option to share the content by email - a verb labelling a button.
 		title: __( 'Mail', 'jetpack' ),
 		keywords: [ 'email', 'e-mail' ],
-		icon: <SocialIcon icon={ 'mail' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'mail' } size={ 24 } />,
 	},
 	{
 		name: 'mastodon',
 		attributes: { service: 'mastodon', label: 'Mastodon' },
 		title: 'Mastodon',
-		icon: <SocialIcon icon={ 'mastodon' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'mastodon' } size={ 24 } />,
 	},
 	{
 		name: 'pinterest',
 		attributes: { service: 'pinterest', label: 'Pinterest' },
 		title: 'Pinterest',
-		icon: <SocialIcon icon={ 'pinterest' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'pinterest' } size={ 24 } />,
 	},
 	{
 		name: 'pocket',
 		attributes: { service: 'pocket', label: 'Pocket' },
 		title: 'Pocket',
-		icon: <SocialIcon icon={ 'pocket' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'pocket' } size={ 24 } />,
 	},
 	{
 		name: 'reddit',
 		attributes: { service: 'reddit', label: 'Reddit' },
 		title: 'Reddit',
-		icon: <SocialIcon icon={ 'reddit' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'reddit' } size={ 24 } />,
 	},
 	{
 		name: 'telegram',
 		attributes: { service: 'telegram', label: 'Telegram' },
 		title: 'Telegram',
-		icon: <SocialIcon icon={ 'telegram' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'telegram' } size={ 24 } />,
 	},
 	{
 		name: 'threads',
 		attributes: { service: 'threads', label: 'Threads' },
 		title: 'Threads',
-		icon: <SocialIcon icon={ 'threads' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'threads' } size={ 24 } />,
 	},
 	{
 		name: 'tumblr',
 		attributes: { service: 'tumblr', label: 'Tumblr' },
 		title: 'Tumblr',
-		icon: <SocialIcon icon={ 'tumblr' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'tumblr' } size={ 24 } />,
 	},
 	{
 		name: 'whatsapp',
 		attributes: { service: 'whatsapp', label: 'WhatsApp' },
 		title: 'WhatsApp',
-		icon: <SocialIcon icon={ 'whatsapp' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'whatsapp' } size={ 24 } />,
 	},
 	{
 		name: 'x',
 		attributes: { service: 'x', label: 'X' },
 		keywords: [ 'twitter', 'x' ],
 		title: 'X',
-		icon: <SocialIcon icon={ 'x' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'x' } size={ 24 } />,
 	},
 	{
 		name: 'twitter',
 		attributes: { service: 'twitter', label: 'Twitter' },
 		keywords: [ 'twitter' ],
 		title: 'Twitter',
-		icon: <SocialIcon icon={ 'twitter' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'twitter' } size={ 24 } />,
 	},
 	{
 		name: 'nextdoor',
 		attributes: { service: 'nextdoor', label: 'Nextdoor' },
 		title: 'Nextdoor',
-		icon: <SocialIcon icon={ 'nextdoor' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'nextdoor' } size={ 24 } />,
 	},
 	{
 		name: 'native-share',
@@ -121,7 +121,7 @@ export const variations = [
 		},
 		// translators: option to share the content - a verb labelling a button.
 		title: __( 'Native Share', 'jetpack' ),
-		icon: <SocialIcon icon={ 'share' } size={ 24 } />,
+		icon: <SocialLogo icon={ 'share' } size={ 24 } />,
 		//TODO: we can add link in the future to proper documentation
 		description: __(
 			'Share with native tools on users device or copy to clipboard otherwise',
@@ -163,17 +163,17 @@ export default variations;
 // 	name: 'twitch',
 // 	attributes: { service: 'twitch' },
 // 	title: 'Twitch',
-// 	icon: <SocialIcon icon={ 'twitch' } size={ 24 } />,
+// 	icon: <SocialLogo icon={ 'twitch' } size={ 24 } />,
 // },
 // {
 // 	name: 'patreon',
 // 	attributes: { service: 'patreon' },
 // 	title: 'Patreon',
-// 	icon: <SocialIcon icon={ 'patreon' } size={ 24 } />,
+// 	icon: <SocialLogo icon={ 'patreon' } size={ 24 } />,
 // },
 // {
 // 	name: 'skype',
 // 	attributes: { service: 'skype' },
 // 	title: 'Skype',
-// 	icon: <SocialIcon icon={ 'skype' } size={ 24 } />,
+// 	icon: <SocialLogo icon={ 'skype' } size={ 24 } />,
 // },