Display SVG in front end (Question)

[Fortyfive]

Hi, I have managed to populate the select field but cannot seem to display the output on the front end. Are you able to provide an example? Thanks in advance...

[MaximeCulea]

Hi @Fortyfive,

We are using a function in front to display all SVGs and of course also the retrieved icon from the svg selector : bea_the_icon( str_replace( 'icon-', '', $icon ) );

As the classname representing the SVG icon is fully retrieved, we must take off the icon- part. The following helper already handle it :

<?php
/**
 * Get the theme's icon display depending on given type
 *
 * @var string $type
 *
 * @author Maxime CULEA
 *
 * @param $type
 *
 * @return string
 */
function bea_get_the_icon( $type ) {
	return sprintf( '<svg class="icon icon-%1$s" aria-hidden="true" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-%1$s"></use></svg>', esc_attr( $type ) );
}

/**
 * Display the theme's icon display depending on given type
 *
 * @var string $type
 *
 * @author Maxime CULEA
 *
 * @param $type
 */
function bea_the_icon( $type ) {
	echo bea_get_the_icon( $type );
}

Does it sounds good for you ?

[Fortyfive]

Thanks Maxine! I’ll give this a go… David From: Maxime CULEA <notifications@github.com> Reply-To: BeAPI/acf-svg-icon <reply@reply.github.com> Date: Friday, 6 October 2017 at 10:21 To: BeAPI/acf-svg-icon <acf-svg-icon@noreply.github.com> Cc: David Hedley <david@fortyfivecreative.co.uk>, Mention <mention@noreply.github.com> Subject: Re: [BeAPI/acf-svg-icon] Display SVG in front end (Question) (#7) Hi @Fortyfive<https://github.com/fortyfive>, We are using a function in front to display all SVGs and of course also the retrieved icon from the svg selector : bea_the_icon( str_replace( 'icon-', '', $icon ) ); As the classname representing the SVG icon is fully retrieved, we must take off the icon- part. The following helper already handle it : <?php /** * Get the theme's icon display depending on given type * * @var string $type * * @author Maxime CULEA * * @PARAM $type * * @return string */ function bea_get_the_icon( $type ) { return sprintf( '<svg class="icon icon-%1$s" aria-hidden="true" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-%1$s"></use></svg>', esc_attr( $type ) ); } /** * Display the theme's icon display depending on given type * * @var string $type * * @author Maxime CULEA * * @PARAM $type */ function bea_the_icon( $type ) { echo bea_get_the_icon( $type ); } Does it sounds good for you ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#7 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAWSgqCGKF0AT1cBqocq8y0O58R-yPeZks5spfEMgaJpZM4PwLuy>.

[Fortyfive]

Sorry Maxine, I still seem to be struggling. I cannot seem to get the syntax correct that appears in the page template to display the chosen icon. How do I add the ACF field name?

[MaximeCulea]

Please have look to official documentation : https://www.advancedcustomfields.com/resources/get_field/

[Fortyfive]

Thanks Maxime. From: Maxime CULEA <notifications@github.com> Reply-To: BeAPI/acf-svg-icon <reply@reply.github.com> Date: Friday, 6 October 2017 at 12:50 To: BeAPI/acf-svg-icon <acf-svg-icon@noreply.github.com> Cc: David Hedley <david@fortyfivecreative.co.uk>, Mention <mention@noreply.github.com> Subject: Re: [BeAPI/acf-svg-icon] Display SVG in front end (Question) (#7) Please have look to official documentation : https://www.advancedcustomfields.com/resources/get_field/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#7 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAWSgr1saDuGU456kBfYDZti4rukHFMlks5sphQAgaJpZM4PwLuy>.

[srikat]

Has anyone figured out how to display the selected icon for a custom field named say, title_icon as a SVG file on the front end?

I managed to show it as an <img>.

[hansmorb]

Hey, I am unfortunately also having issues. The field populates but the resulting HTML just looks like this:

The actual icon is not showing.