Merge pull request #29094 from woocommerce/try/admin-menu-svg-icons

Use SVG and Dashicons instead of custom font for admin bar icons

assets/css/menu.scss

@@ -7,60 +7,49 @@
 /**
  * Imports
  */
-@import 'mixins';
-@import 'variables';
-@import 'fonts';
+@import "mixins";
+@import "variables";
+@import "fonts";
 
 /**
  * Styling begins
  */
-#adminmenu #toplevel_page_woocommerce .menu-icon-generic div.wp-menu-image::before {
-	font-family: 'WooCommerce' !important;
-	content: '\e03d';
-}
-
-#adminmenu #menu-posts-product .menu-icon-post div.wp-menu-image::before,
-#adminmenu #menu-posts-product .menu-icon-product div.wp-menu-image::before {
-	font-family: 'WooCommerce' !important;
-	content: '\e006';
-}
-
-#adminmenu #toplevel_page_wc-reports .menu-icon-generic div.wp-menu-image::before {
-	font-family: 'WooCommerce' !important;
-	content: '\e023';
-	font-size: 1.3em !important;
-}
-
 span.mce_woocommerce_shortcodes_button {
 	background-image: none !important;
+
 	@include ir();
 
 	&::before {
-		@include icon( '\e01d' );
+
+		@include icon("\e01d");
 		font-size: 0.9em;
 		line-height: 1.2;
 	}
 }
 
 #woocommerce-update {
+
 	.updating-message {
+
 		.wc_plugin_upgrade_notice {
 			display: none;
 		}
 	}
+
 	.dummy {
 		display: none;
 	}
+
 	.wc_plugin_upgrade_notice {
 		font-weight: normal;
-		background: #FFF8E5 !important;
-		border-left: 4px solid #FFB900;
-		border-top: 1px solid #FFB900;
+		background: #fff8e5 !important;
+		border-left: 4px solid #ffb900;
+		border-top: 1px solid #ffb900;
 		padding: 9px 0 9px 12px !important;
 		margin: 0 -12px 0 -16px !important;
 
 		&::before {
-			content: '\f348';
+			content: "\f348";
 			display: inline-block;
 			font: 400 18px/1 dashicons;
 			speak: never;
@@ -71,9 +60,11 @@ span.mce_woocommerce_shortcodes_button {
 		&.minor,
 		&.major {
 			padding: 20px 0 !important;
+
 			&::before {
 				display: none;
 			}
+
 			p {
 				padding: 0 20px;
 				margin: 0;
@@ -81,24 +72,29 @@ span.mce_woocommerce_shortcodes_button {
 				line-height: 1.5em;
 
 				&::before {
-					content: '';
+					content: "";
 					display: none;
 				}
 			}
+
 			table.plugin-details-table {
-				margin: .75em 0 0;
+				margin: 0.75em 0 0;
+
 				tr {
 					background: transparent none !important;
 					border: 0 !important;
 				}
-				th, td {
+
+				th,
+				td {
 					background: transparent none !important;
 					margin: 0;
-					padding: .75em 20px 0;
+					padding: 0.75em 20px 0;
 					border: 0 !important;
 					font-size: 1em;
 					box-shadow: none;
 				}
+
 				th {
 					font-weight: bold;
 				}
@@ -136,14 +132,15 @@ span.mce_woocommerce_shortcodes_button {
 }
 
 .wc_untested_extensions_modal--content {
+
 	h1 {
 		margin: 2px 2px 0.5em;
-		padding: .75em 1em;
+		padding: 0.75em 1em;
 		line-height: 1.5em;
 		font-size: 2em;
 		border-bottom: 1px solid #eee;
 		color: #fff;
-		background: #96578A;
+		background: #96578a;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
 		text-shadow: none;
@@ -160,14 +157,17 @@ span.mce_woocommerce_shortcodes_button {
 
 	table.plugin-details-table {
 		margin: 20px 0;
-		th, td {
+
+		th,
+		td {
 			background: transparent none !important;
 			margin: 0;
-			padding: .75em 20px 0;
+			padding: 0.75em 20px 0;
 			border: 0 !important;
 			font-size: 1em;
 			box-shadow: none;
 		}
+
 		th {
 			font-weight: bold;
 			margin-top: 0;
@@ -190,12 +190,20 @@ span.mce_woocommerce_shortcodes_button {
 			border-color: #a36597;
 			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
 			color: #fff;
-			text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597;
+			text-shadow:
+				0 -1px 1px #a36597,
+				1px 0 1px #a36597,
+				0 1px 1px #a36597,
+				-1px 0 1px #a36597;
 
-			&:hover, &:focus, &:active {
+			&:hover,
+			&:focus,
+			&:active {
 				background: #a36597;
 				border-color: #a36597;
-				box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
+				box-shadow:
+					inset 0 1px 0 rgba(255, 255, 255, 0.25),
+					0 1px 0 #a36597;
 			}
 		}
 	}

includes/admin/class-wc-admin-menus.php

@@ -55,11 +55,13 @@ class WC_Admin_Menus {
 	public function admin_menu() {
 		global $menu;
 
+		$woocommerce_icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiNhMmFhYjIiIGQ9Ik02MTIuMTkyIDQyNi4zMzZjMC02Ljg5Ni0zLjEzNi01MS42LTI4LTUxLjYtMzcuMzYgMC00Ni43MDQgNzIuMjU2LTQ2LjcwNCA4Mi42MjQgMCAzLjQwOCAzLjE1MiA1OC40OTYgMjguMDMyIDU4LjQ5NiAzNC4xOTItLjAzMiA0Ni42NzItNzIuMjg4IDQ2LjY3Mi04OS41MnptMjAyLjE5MiAwYzAtNi44OTYtMy4xNTItNTEuNi0yOC4wMzItNTEuNi0zNy4yOCAwLTQ2LjYwOCA3Mi4yNTYtNDYuNjA4IDgyLjYyNCAwIDMuNDA4IDMuMDcyIDU4LjQ5NiAyNy45NTIgNTguNDk2IDM0LjE5Mi0uMDMyIDQ2LjY4OC03Mi4yODggNDYuNjg4LTg5LjUyek0xNDEuMjk2Ljc2OGMtNjguMjI0IDAtMTIzLjUwNCA1NS40ODgtMTIzLjUwNCAxMjMuOTJ2NjUwLjcyYzAgNjguNDMyIDU1LjI5NiAxMjMuOTIgMTIzLjUwNCAxMjMuOTJoMzM5LjgwOGwxMjMuNTA0IDEyMy45MzZWODk5LjMyOGgyNzguMDQ4YzY4LjIyNCAwIDEyMy41Mi01NS40NzIgMTIzLjUyLTEyMy45MnYtNjUwLjcyYzAtNjguNDMyLTU1LjI5Ni0xMjMuOTItMTIzLjUyLTEyMy45MmgtNzQxLjM2em01MjYuODY0IDQyMi4xNmMwIDU1LjA4OC0zMS4wODggMTU0Ljg4LTEwMi42NCAxNTQuODgtNi4yMDggMC0xOC40OTYtMy42MTYtMjUuNDI0LTYuMDE2LTMyLjUxMi0xMS4xNjgtNTAuMTkyLTQ5LjY5Ni01Mi4zNTItNjYuMjU2IDAgMC0zLjA3Mi0xNy43OTItMy4wNzItNDAuNzUyIDAtMjIuOTkyIDMuMDcyLTQ1LjMyOCAzLjA3Mi00NS4zMjggMTUuNTUyLTc1LjcyOCA0My41NTItMTA2LjczNiA5Ni40NDgtMTA2LjczNiA1OS4wNzItLjAzMiA4My45NjggNTguNTI4IDgzLjk2OCAxMTAuMjA4ek00ODYuNDk2IDMwMi40YzAgMy4zOTItNDMuNTUyIDE0MS4xNjgtNDMuNTUyIDIxMy40MjR2NzUuNzEyYy0yLjU5MiAxMi4wOC00LjE2IDI0LjE0NC0yMS44MjQgMjQuMTQ0LTQ2LjYwOCAwLTg4Ljg4LTE1MS40NzItOTIuMDE2LTE2MS44NC02LjIwOCA2Ljg5Ni02Mi4yNCAxNjEuODQtOTYuNDQ4IDE2MS44NC0yNC44NjQgMC00My41NTItMTEzLjY0OC00Ni42MDgtMTIzLjkzNkMxNzYuNzA0IDQzNi42NzIgMTYwIDMzNC4yMjQgMTYwIDMyNy4zMjhjMC0yMC42NzIgMS4xNTItMzguNzM2IDI2LjA0OC0zOC43MzYgNi4yMDggMCAyMS42IDYuMDY0IDIzLjcxMiAxNy4xNjggMTEuNjQ4IDYyLjAzMiAxNi42ODggMTIwLjUxMiAyOS4xNjggMTg1Ljk2OCAxLjg1NiAyLjkyOCAxLjUwNCA3LjAwOCA0LjU2IDEwLjQzMiAzLjE1Mi0xMC4yODggNjYuOTI4LTE2OC43ODQgOTQuOTYtMTY4Ljc4NCAyMi41NDQgMCAzMC40IDQ0LjU5MiAzMy41MzYgNjEuODI0IDYuMjA4IDIwLjY1NiAxMy4wODggNTUuMjE2IDIyLjQxNiA4Mi43NTIgMC0xMy43NzYgMTIuNDgtMjAzLjEyIDY1LjM5Mi0yMDMuMTIgMTguNTkyLjAzMiAyNi43MDQgNi45MjggMjYuNzA0IDI3LjU2OHpNODcwLjMyIDQyMi45MjhjMCA1NS4wODgtMzEuMDg4IDE1NC44OC0xMDIuNjQgMTU0Ljg4LTYuMTkyIDAtMTguNDQ4LTMuNjE2LTI1LjQyNC02LjAxNi0zMi40MzItMTEuMTY4LTUwLjE3Ni00OS42OTYtNTIuMjg4LTY2LjI1NiAwIDAtMy44ODgtMTcuOTItMy44ODgtNDAuODk2czMuODg4LTQ1LjE4NCAzLjg4OC00NS4xODRjMTUuNTUyLTc1LjcyOCA0My40ODgtMTA2LjczNiA5Ni4zODQtMTA2LjczNiA1OS4xMDQtLjAzMiA4My45NjggNTguNTI4IDgzLjk2OCAxMTAuMjA4eiIvPjwvc3ZnPg==';
+
 		if ( current_user_can( 'edit_others_shop_orders' ) ) {
 			$menu[] = array( '', 'read', 'separator-woocommerce', '', 'wp-menu-separator woocommerce' ); // WPCS: override ok.
 		}
 
-		add_menu_page( __( 'WooCommerce', 'woocommerce' ), __( 'WooCommerce', 'woocommerce' ), 'edit_others_shop_orders', 'woocommerce', null, null, '55.5' );
+		add_menu_page( __( 'WooCommerce', 'woocommerce' ), __( 'WooCommerce', 'woocommerce' ), 'edit_others_shop_orders', 'woocommerce', null, $woocommerce_icon, '55.5' );
 
 		add_submenu_page( 'edit.php?post_type=product', __( 'Attributes', 'woocommerce' ), __( 'Attributes', 'woocommerce' ), 'manage_product_terms', 'product_attributes', array( $this, 'attributes_page' ) );
 	}
@@ -71,7 +73,7 @@ class WC_Admin_Menus {
 		if ( current_user_can( 'edit_others_shop_orders' ) ) {
 			add_submenu_page( 'woocommerce', __( 'Reports', 'woocommerce' ), __( 'Reports', 'woocommerce' ), 'view_woocommerce_reports', 'wc-reports', array( $this, 'reports_page' ) );
 		} else {
-			add_menu_page( __( 'Sales reports', 'woocommerce' ), __( 'Sales reports', 'woocommerce' ), 'view_woocommerce_reports', 'wc-reports', array( $this, 'reports_page' ), null, '55.6' );
+			add_menu_page( __( 'Sales reports', 'woocommerce' ), __( 'Sales reports', 'woocommerce' ), 'view_woocommerce_reports', 'wc-reports', array( $this, 'reports_page' ), 'dashicons-chart-bar', '55.6' );
 		}
 	}
 

includes/class-wc-post-types.php

@@ -339,6 +339,7 @@ class WC_Post_Types {
 					'description'         => __( 'This is where you can add new products to your store.', 'woocommerce' ),
 					'public'              => true,
 					'show_ui'             => true,
+					'menu_icon'           => 'dashicons-archive',
 					'capability_type'     => 'product',
 					'map_meta_cap'        => true,
 					'publicly_queryable'  => true,