Merge pull request #4135 from Codeinwp/feat/custom-svg-menu-icon

Support changes for the custom svg menu icon
Codeinwp · Jan 25, 2024 · 7ea56bf · 7ea56bf
2 parents 056a726 + 3ea9441
commit 7ea56bf
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 15 deletions.
diff --git a/bin/envs/woo-sample/start.sh b/bin/envs/woo-sample/start.sh
@@ -9,4 +9,4 @@ wp --allow-root import ./themeunittestdata.wordpress.xml --authors=skip  --skip=
 
 #Setup content for woo
 curl -O https://raw.githubusercontent.com/woocommerce/woocommerce/master/sample-data/sample_products.xml
-wp --allow-root import ./sample_products.xml --authors=skip --skip=image_resize
+wp --allow-root import ./sample_products.xml --authors=skip --skip=image_resize
diff --git a/globals/utilities.php b/globals/utilities.php
@@ -281,9 +281,13 @@ function neve_get_svg_allowed_tags() {
 			'type' => true,
 		),
 		'g'        => array(
-			'fill'      => true,
-			'transform' => true,
-			'style'     => true,
+			'fill'            => true,
+			'transform'       => true,
+			'style'           => true,
+			'stroke'          => true,
+			'stroke-linecap'  => true,
+			'stroke-linejoin' => true,
+			'stroke-width'    => true,
 		),
 		'circle'   => array(
 			'cx'        => true,
@@ -302,15 +306,18 @@ function neve_get_svg_allowed_tags() {
 			'style'           => true,
 			'class'           => true,
 			'transform'       => true,
+			'stroke'          => true,
 			'stroke-linecap'  => true,
 			'stroke-linejoin' => true,
 			'stroke-width'    => true,
 		),
 		'polyline' => array(
-			'fill'         => true,
-			'stroke'       => true,
-			'stroke-width' => true,
-			'points'       => true,
+			'fill'            => true,
+			'stroke'          => true,
+			'stroke-linecap'  => true,
+			'stroke-linejoin' => true,
+			'stroke-width'    => true,
+			'points'          => true,
 		),
 		'polygon'  => array(
 			'class'     => true,

diff --git a/header-footer-grid/Core/Components/MenuIcon.php b/header-footer-grid/Core/Components/MenuIcon.php
@@ -34,6 +34,8 @@ class MenuIcon extends Abstract_Component {
 	const QUICK_LINKS_ID    = 'quick-links';
 	const LABEL_MARGIN_ID   = 'label_margin';
 	const MENU_ICON         = 'menu_icon';
+	const SIZE_ID           = 'icon_size';
+	const MENU_SVG          = 'svg_menu_icon';
 
 	/**
 	 * Padding settings default values.
@@ -205,7 +207,7 @@ public function toggle_style() {
 	 */
 	private function get_menu_style( $menu_icon ) {
 		// We don't add any css for the default option.
-		if ( ! in_array( $menu_icon, [ 'arrow', 'donner', 'dots', 'minus', 'vortex', 'squeeze' ] ) ) {
+		if ( ! in_array( $menu_icon, [ 'arrow', 'donner', 'dots', 'minus', 'vortex', 'squeeze', 'svg' ] ) ) {
 			return '';
 		}
 
@@ -406,7 +408,18 @@ private function get_menu_style( $menu_icon ) {
 				}
 CSS;
 		}
-
+		// SVG style
+		if ( $menu_icon === 'svg' ) {
+			$menu_icon_size = Mods::get( $this->get_id() . '_' . self::SIZE_ID, '15' ) . 'px';
+			$css           .= <<<CSS
+				.hamburger-box.icon-svg {
+					width: 100%;
+					height: var(--menuiconsize, $menu_icon_size);
+					display:flex;
+					justify-content:center;
+				}
+CSS;
+		}
 		// Squeeze style
 		if ( $menu_icon === 'squeeze' ) {
 			$css .= <<<CSS
@@ -547,6 +560,43 @@ public function add_settings() {
 			]
 		);
 
+		SettingsManager::get_instance()->add(
+			[
+				'id'                    => self::SIZE_ID,
+				'group'                 => $this->get_id(),
+				'tab'                   => SettingsManager::TAB_STYLE,
+				'transport'             => 'postMessage',
+				'sanitize_callback'     => 'absint',
+				'default'               => 15,
+				'label'                 => __( 'Icon Size', 'neve' ),
+				'type'                  => 'Neve\Customizer\Controls\React\Range',
+				'options'               => [
+					'active_callback' => function () {
+						return Mods::get( $this->get_id() . '_' . self::MENU_ICON, 'default' ) === 'svg';
+
+					},
+					'priority'        => 11,
+					'input_attrs'     => [
+						'min'        => 10,
+						'max'        => 100,
+						'defaultVal' => 15,
+					],
+				],
+				'live_refresh_selector' => $this->default_selector . ' span.icon-svg',
+				'live_refresh_css_prop' => [
+					'cssVar'  => [
+						'vars'     => '--menuiconsize',
+						'selector' => '.builder-item--' . $this->get_id(),
+						'suffix'   => 'px',
+					],
+					'type'    => 'svg-icon-size',
+					'default' => 15,
+				],
+				'section'               => $this->section,
+				'conditional_header'    => true,
+			]
+		);
+
 		$mod_key = self::BUTTON_APPEARANCE;
 		$default = [
 			'type'         => 'outline',

diff --git a/header-footer-grid/templates/components/component-menu-icon.php b/header-footer-grid/templates/components/component-menu-icon.php
@@ -14,7 +14,10 @@
 $item_attributes = apply_filters( 'neve_nav_toggle_data_attrs', '' );
 $label           = component_setting( MenuIcon::TEXT_ID );
 $menu_icon       = component_setting( MenuIcon::MENU_ICON );
-
+$menu_svg        = component_setting( MenuIcon::MENU_SVG );
+if ( $menu_icon === 'svg' && empty( $menu_svg ) ) {
+	$menu_icon = 'default';
+}
 $class = '';
 if ( $menu_icon !== 'default' ) {
 	$class = apply_filters( 'neve_menu_icon_classes', 'hamburger ', $menu_icon );
@@ -43,8 +46,16 @@
 			<?php
 		} else {
 			?>
-			<span class="hamburger-box">
-				<span class="hamburger-inner"></span>
+			<span class="hamburger-box <?php echo esc_attr( 'icon-' . $menu_icon ); ?>">
+				<?php
+				if ( $menu_icon === 'svg' ) {
+					echo neve_kses_svg( $menu_svg ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+				} else {
+					?>
+					<span class="hamburger-inner"></span>
+					<?php
+				}
+				?>
 			</span>
 			<?php
 		}

diff --git a/header-footer-grid/templates/row-wrapper-mobile.php b/header-footer-grid/templates/row-wrapper-mobile.php
@@ -23,6 +23,12 @@
 $close_classes    = 'close-sidebar-panel navbar-toggle-wrapper' . ( $close_contained ? ' container' : '' );
 $submenu_style    = row_setting( 'layout', 'slide_left' );
 $menu_icon_class  = apply_filters( 'neve_menu_icon_classes', 'hamburger is-active ' );
+
+$menu_icon = component_setting( MenuIcon::MENU_ICON );
+$menu_svg  = component_setting( MenuIcon::MENU_SVG );
+if ( $menu_icon === 'svg' && empty( $menu_svg ) ) {
+	$menu_icon = 'default';
+}
 ?>
 <div
 		id="header-menu-sidebar" class="<?php echo esc_attr( join( ' ', $classes ) ); ?>"
@@ -47,9 +53,17 @@
 				<?php
 			} else {
 				?>
-					<span class="hamburger-box">
+				<span class="hamburger-box <?php echo esc_attr( 'icon-' . $menu_icon ); ?>">
+					<?php
+					if ( $menu_icon === 'svg' ) {
+						echo neve_kses_svg( $menu_svg ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+					} else {
+						?>
 						<span class="hamburger-inner"></span>
-					</span>
+						<?php
+					}
+					?>
+				</span>
 				<?php
 			}
 			?>

diff --git a/start.php b/start.php
@@ -34,6 +34,7 @@ function neve_run() {
 			'hfg_d_search_iconbutton'   => true, // Dynamic icon selection or a button for search components
 			'restrict_content'          => true,
 			'theme_dedicated_menu'      => true, // Theme uses the new menu location for settings and sub-pages.
+			'menu_icon_svg'             => true,
 			'custom_payment_icons'      => true,
 		]
 	);