KAD-3783 requested updates

stellarwp · Jan 2, 2025 · bfbb418 · bfbb418
1 parent d360e68
commit bfbb418
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/includes/blocks/class-kadence-blocks-infobox-block.php b/includes/blocks/class-kadence-blocks-infobox-block.php
@@ -301,20 +301,22 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 				$css->add_property( 'fill', $media_icon['hoverColor'] );
 			}
 		}
+		// Media icon unit
+		$media_icon_unit = isset( $media_icon['unit'] ) ? $media_icon['unit'] : 'px' ;
 		if ( ! empty( $media_icon['size'] ) ) {
 			$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
-			$css->add_property( 'font-size', $media_icon['size'] . ( isset($media_icon['unit']) ? $media_icon['unit'] : 'px') );
+			$css->add_property( 'font-size', $media_icon['size'] . $media_icon_unit );
 		}
 		if ( isset( $media_icon['tabletSize'] ) && is_numeric( $media_icon['tabletSize'] ) ) {
 			$css->set_media_state( 'tablet' );
 			$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
-			$css->add_property( 'font-size', $media_icon['tabletSize'] . ( isset($media_icon['unit']) ? $media_icon['unit'] : 'px') );
+			$css->add_property( 'font-size', $media_icon['tabletSize'] . $media_icon_unit );
 			$css->set_media_state( 'desktop' );
 		}
 		if ( isset( $media_icon['mobileSize'] ) && is_numeric( $media_icon['mobileSize'] ) ) {
 			$css->set_media_state( 'mobile' );
 			$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
-			$css->add_property( 'font-size', $media_icon['mobileSize'] . ( isset($media_icon['unit']) ? $media_icon['unit'] : 'px') );
+			$css->add_property( 'font-size', $media_icon['mobileSize'] . $media_icon_unit );
 			$css->set_media_state( 'desktop' );
 		}
 		if ( ( isset( $media_number['family'] ) && ! empty( $media_number['family'] ) ) || ( isset( $media_number['style'] ) && ! empty( $media_number['style'] ) ) || ( isset( $media_number['weight'] ) && ! empty( $media_number['weight'] ) ) ) {

diff --git a/src/blocks/infobox/edit.js b/src/blocks/infobox/edit.js
@@ -3983,11 +3983,11 @@ function KadenceInfoBox(props) {
 								<div
 									className={`kadence-info-box-icon-container kt-info-icon-animate-${mediaIcon[0].hoverAnimation}`}
 								>
-									<div className={'kadence-info-box-icon-inner-container'}>
+									<div className={'kadence-info-box-icon-inner-container'} style={{fontSize: previewMediaIconSize + mediaIcon[0].unit}}>
 										<IconRender
 											className={`kt-info-svg-icon kt-info-svg-icon-${mediaIcon[0].icon}`}
 											name={mediaIcon[0].icon}
-											size={previewMediaIconSize}
+											size={'1em'}
 											unit={mediaIcon[0].unit ? mediaIcon[0].unit : ''}
 											htmltag="span"
 											strokeWidth={
@@ -4006,7 +4006,7 @@ function KadenceInfoBox(props) {
 											<IconRender
 												className={`kt-info-svg-icon-flip kt-info-svg-icon-${mediaIcon[0].flipIcon}`}
 												name={mediaIcon[0].flipIcon}
-												size={previewMediaIconSize}
+												size={'1em'}
 												htmltag="span"
 												strokeWidth={
 													'fe' === mediaIcon[0].flipIcon.substring(0, 2)

diff --git a/src/packages/components/src/icons/gen-icon/index.js b/src/packages/components/src/icons/gen-icon/index.js
@@ -39,7 +39,7 @@ export const GenIcon = ( props ) => {
 	const viewB = ( props.icon && props.icon.vB ? props.icon.vB.split( ' ' ) : false );
 	return (
 		<HtmlTagOut style={ { display: 'inline-flex', justifyContent: 'center', alignItems: 'center', ...style } } className={ `${className} ${props.size === 0 ? 'kb-icon-transparent' : ''}` }>
-			<svg style={ { display: 'inline-block', verticalAlign: 'middle' } } viewBox={ ( ! props.icon ? '0 0 24 24' : props.icon.vB ) } height={ props.size === 0 ? '24' : props.size + (props.unit ? props.unit : '') } width={ props.size === 0 ? '24' : props.size + (props.unit ? props.unit : '') } fill={ fill } stroke={ stroke } xmlns={ props.xmlns } preserveAspectRatio={ ( typeL && 'fas' !== typeL && 'fe_' !== typeL && 'ic_' !== typeL && viewB && ( ( undefined !== viewB[ 0 ] && viewB[ 0 ] !== 0 ) || ( undefined !== viewB[ 1 ] && viewB[ 1 ] !== 0 ) ) ? 'xMinYMin meet' : undefined ) } stroke-width={ strokeWidth } stroke-linecap={ strokeLinecap } stroke-linejoin={ strokeLinejoin } aria-hidden={ ariaHidden }>
+			<svg style={ { display: 'inline-block', verticalAlign: 'middle' } } viewBox={ ( ! props.icon ? '0 0 24 24' : props.icon.vB ) } height={ props.size === 0 ? '24' : props.size } width={ props.size === 0 ? '24' : props.size } fill={ fill } stroke={ stroke } xmlns={ props.xmlns } preserveAspectRatio={ ( typeL && 'fas' !== typeL && 'fe_' !== typeL && 'ic_' !== typeL && viewB && ( ( undefined !== viewB[ 0 ] && viewB[ 0 ] !== 0 ) || ( undefined !== viewB[ 1 ] && viewB[ 1 ] !== 0 ) ) ? 'xMinYMin meet' : undefined ) } stroke-width={ strokeWidth } stroke-linecap={ strokeLinecap } stroke-linejoin={ strokeLinejoin } aria-hidden={ ariaHidden }>
 				{ props.title ? <title>{ props.title }</title> : null }
 				{ props.icon && (
 					walkChildren( props.icon.cD )