Components: complete Gridicon → @wordpress/icons migration (continues #48164)

projects/js-packages/components/changelog/rna-gridicon

@@ -0,0 +1,4 @@
+Significance: minor
+Type: removed
+
+Remove Gridicon component. Use Icon and named icon exports from `@wordpress/icons` instead.

projects/js-packages/components/components/boost-score-bar/index.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
+import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.tsx';
 import type { BoostScoreBarProps } from './types.ts';
 import type { FunctionComponent } from 'react';
 
@@ -25,10 +25,10 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 
 	const getIcon = () => {
 		if ( scoreBarType === 'desktop' ) {
-			return <Gridicon icon="computer" size={ 24 } />;
+			return <Icon icon={ desktop } size={ 24 } />;
 		}
 
-		return <Gridicon icon="phone" size={ 24 } />;
+		return <Icon icon={ mobile } size={ 24 } />;
 	};
 
 	const getFillColor = () => {

projects/js-packages/components/components/boost-score-bar/test/component.tsx

@@ -55,14 +55,14 @@ describe( 'BoostScrollBar', () => {
 		const { container } = render( <BoostScoreBar { ...defaultProps } scoreBarType="mobile" /> );
 
 		expect( screen.getByText( 'Mobile score' ) ).toBeInTheDocument();
-		expect( container.querySelector( '.gridicons-phone' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.jb-score-bar__label svg' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders desktop icon and text when scoreBarType is desktop', () => {
 		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
 
 		expect( screen.getByText( 'Desktop score' ) ).toBeInTheDocument();
-		expect( container.querySelector( '.gridicons-computer' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.jb-score-bar__label svg' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders previous scores when showPrevScores is true', () => {