Storybook: Support dashicons for testing

packages/components/src/icon/stories/index.js

@@ -13,6 +13,7 @@ import { wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../';
+import { VStack } from '../../v-stack';
 
 export default {
 	title: 'Components/Icon',
@@ -108,3 +109,20 @@ export const withAnSVG = () => {
 		/>
 	);
 };
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
+ * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
+ */
+export const withADashicon = () => {
+	return (
+		<VStack>
+			<Icon icon="wordpress" />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};

storybook/decorators/with-global-css.js

@@ -39,6 +39,8 @@ const config = {
 			// that affect wp-components
 			'https://wordpress.org/gutenberg/wp-admin/css/common.min.css',
 			'https://wordpress.org/gutenberg/wp-admin/css/forms.min.css',
+			// Icon components need to support dashicons for backwards compatibility
+			'https://wordpress.org/gutenberg/wp-includes/css/dashicons.min.css',
 		],
 		// In wp-admin, these classes are added to the body element,
 		// which is used as a class scope for some relevant styles in the external

storybook/preview.js

@@ -29,7 +29,10 @@ export const globalTypes = {
 			items: [
 				{ value: 'none', title: 'None' },
 				{ value: 'basic', title: 'Font only' },
-				{ value: 'wordpress', title: 'WordPress (common/forms)' },
+				{
+					value: 'wordpress',
+					title: 'WordPress (common, forms, dashicons)',
+				},
 			],
 		},
 	},