Component Address details

address_title
address
contact_number
contact_mobile
contact_telephone

etc. 

<?php
if ( ! function_exists( 'gomo_contact_details' ) ) :
  	function gomo_contact_details() { ?>
		<div class="address-details">
			<?php 
				// gomo_contact_address_title(); 
				gomo_contact_address(); 
				gomo_contact_email();
				// gomo_contact_mobile(); 
				gomo_contact_phone(); ?>
</div><!-- .address-details -->
  	<?php
  	};
endif; 
if ( ! function_exists( 'gomo_contact_phone' ) ) :
  	function gomo_contact_phone() { ?>
<?php if (get_field('contact_number', 'option')) { 
$connumber = get_field('contact_number', 'option'); 
$connumber = str_replace(array('(', ')', ' ', '-'), '', $connumber); ?>
					<div class="contact-number header-details-link">
					<span class="icon" aria-hidden="true"><?php twentytwenty_the_theme_svg( 'phone'); ?></span>
					<a href="tel:<?php echo $connumber; ?>" title="Telephone number <?php the_field('contact_number', 'option')  ?>">	
						<?php the_field('contact_number', 'option')  ?></a></div>
				<?php } ?>
  	<?php
  	};
endif;

.address-details .icon {
	@include mixin-icon(simple, rem-calc(20), rem-calc(0), none, none, $color_white, none);
}

// https://www.svgbackgrounds.com/tools/svg-to-css/
@mixin contact-icon-mixin()  {
	margin-left: 40px;
	position: relative;
	&:before {
		content: '';
		width: 30px;
		height: 30px;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-position: 0 0;
		position: absolute;
		top: 0;
		left: -40px;
	}
}
.icon-address {
	@include contact-icon-mixin();
	&:before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!-- Font Awesome Pro 5.15.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath d='M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z'/%3E%3C/svg%3E");
		// make icon white
		filter: brightness(0) invert(1);
	}
}