Use BlockIcon component where icon prop can be an object

WordPress · Jul 23, 2021 · 3bb454c · 3bb454c
1 parent 9ecad94
commit 3bb454c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 18 deletions.
diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js
@@ -16,6 +16,7 @@ import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { BottomSheet, Icon, TextControl } from '@wordpress/components';
 import { help } from '@wordpress/icons';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -38,10 +39,6 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const descriptionStyle = usePreferredColorSchemeStyle(
 		styles.embed__description,
 		styles[ 'embed__description--dark' ]
@@ -118,7 +115,7 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 				onPress={ onPressContainer }
 			>
 				<View style={ containerStyle }>
-					<Icon icon={ icon } fill={ embedIconStyle.fill } />
+					<BlockIcon icon={ icon } />
 					<Text style={ labelStyle }>{ label }</Text>
 					<Text style={ descriptionStyle }>
 						{ __( 'Embed previews not yet available' ) }

diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js
@@ -9,6 +9,7 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon } from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -37,10 +38,6 @@ const EmbedPlaceholder = ( {
 		styles.embed__action,
 		styles[ 'embed__action--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
 	return (
@@ -73,7 +70,7 @@ const EmbedPlaceholder = ( {
 						</>
 					) : (
 						<>
-							<Icon icon={ icon } fill={ embedIconStyle.fill } />
+							<BlockIcon icon={ icon } />
 							<Text style={ labelStyle }>{ label }</Text>
 							<Text style={ actionStyle }>
 								{ __( 'ADD LINK' ) }

diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
@@ -19,14 +19,6 @@
 	background-color: $background-dark-secondary;
 }
 
-.embed__icon {
-	fill: $light-secondary;
-}
-
-.embed__icon--dark {
-	fill: $dark-secondary;
-}
-
 .embed__icon--error {
 	margin-bottom: 6;
 	fill: $alert-red;