Display SVG in front end (Question)

[Fortyfive]

trafficstars

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 [email protected] Reply-To: BeAPI/acf-svg-icon [email protected] Date: Friday, 6 October 2017 at 10:21 To: BeAPI/acf-svg-icon [email protected] Cc: David Hedley [email protected], Mention [email protected] Subject: Re: [BeAPI/acf-svg-icon] Display SVG in front end (Question) (#7)

Hi @Fortyfivehttps://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 :

', 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, or mute the thread.

[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 [email protected] Reply-To: BeAPI/acf-svg-icon [email protected] Date: Friday, 6 October 2017 at 12:50 To: BeAPI/acf-svg-icon [email protected] Cc: David Hedley [email protected], Mention [email protected] 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 GitHubhttps://github.com/BeAPI/acf-svg-icon/issues/7#issuecomment-334733338, or mute the threadhttps://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.