BeAPI/acf-svg-icon

Display SVG in front end (Question)

Fortyfive opened this issue · 7 comments

Fortyfive commented

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 commented

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 commented
Fortyfive commented

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 commented

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

Fortyfive commented
srikat commented

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 commented

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

The actual icon is not showing.