Reply To: ACF SVG icon picker frontend php

• Earthman Media

• January 30, 2022 at 3:10 am

Heya @simuniqh – it’s been awhile since you posted, but in case another person runs into this, and wants a solution for actual SVG files and not font icon libraries…here’s what I came up with.

If you came up with something better, please feel free to add…

—

First – this assumes:

– this other SVG icon plugin is installed, not the one you linked to:

https://github.com/houke/acf-icon-picker

– your SVG icons are stored in /wp-content/acf-icons/

– you can/will modify the following code on your own, to suit your use case (I will not support this for free…)

– for advanced features (dynamic sizing and colors), you should have the additional ACF fields also created (see “$context[‘acf’]” entries in code below)

– if you want to support transparency in the colors, make sure you are using the RBGA color picker in ACF Extended pro, and the return value is set to just return the color code value only :

https://www.acf-extended.com/features/fields/color-picker

– if you want to support the sizing, make sure your SVG icons do not have width/height attributes set.

To remove the width / height, do a search on your icon folder in VSCode, using this regex (or similar):

width=(?:"([^"\\]*(?:\\.[^"\\]*)*)"|(\S+)) height=(?:"([^"\\]*(?:\\.[^"\\]*)*)"|(\S+))

—

This code block goes in functions.php (or similar file) – this sets the path of your icons for the plugin linked above:

// ACF ICON PICKER CONFIG

// modify the path to the icons directory
function acf_icon_path_suffix($path_suffix)
{
    return '/acf-icons/';
}
add_filter('acf_icon_path_suffix', 'acf_icon_path_suffix');
// modify the path to the above prefix
function acf_icon_path($path_suffix)
{
    return WP_CONTENT_DIR;
}
add_filter('acf_icon_path', 'acf_icon_path');

// modify the URL to the icons directory to display on the page
function acf_icon_url($path_suffix)
{
    return WP_CONTENT_URL;
}
add_filter('acf_icon_url', 'acf_icon_url');

Modify and use this code block in your theme template file(s) to format the icon file contents to be displayed in the html:

<?php

/* #### frontend code you can use inside the loop of the content that has the ACF fields attached #### */

    // add acf field data
    $context['acf']     = get_fields();
    // assign the acf fields to vars
    $icon_select        = !empty($context['acf']['icon_select']) ? $context['acf']['icon_select'] : null;
    $icon_size          = !empty($context['acf']['icon_size']) ? $context['acf']['icon_size'] : 'sm';
    $icon_fill_color    = !empty($context['acf']['icon_fill_color']) ? $context['acf']['icon_fill_color'] : 'rgba(53, 56, 64, 1);';
    $icon_outline_color = !empty($context['acf']['icon_outline_color']) ? $context['acf']['icon_outline_color'] : 'rgba(53, 56, 64, 1);';
    // start fresh with a new var for the output
    $svg_file_new = '';
    if (!empty($icon_select)) {
        $svg_file    = file_get_contents(WP_CONTENT_DIR . '/acf-icons/' . $icon_select . '.svg');
        $find_string = '<svg';
        $position    = strpos($svg_file, $find_string);
        $svg_file_new = substr($svg_file, $position);
        $svg_file_new = str_replace('<path ', '<path fill="' . str_replace(';', '', $icon_fill_color) . '" ', $svg_file_new);
        if (strstr($svg_file_new, 'stroke')) {
            $svg_file_new = preg_replace('/stroke="([^"]*)"/', 'stroke="' . str_replace(';', '', $icon_outline_color) . '"', $svg_file_new);
        } else {
            $svg_file_new = str_replace(' fill=', ' stroke="' . str_replace(';', '', $icon_outline_color) . '" fill=', $svg_file_new);
        }
    }
    echo $svg_file_new ? "<div class='icon icon-$icon_size'>$svg_file_new</div>" : '';
?>

<style>
/* for dynamic styling - see instructions on using this above*/
    .icon-sm svg {
            width : 36px;
            height: 36px;
    }
    
    .icon-xs svg {
            width : 20px;
            height: 20px;
    }
    
    .icon-md svg {
            width : 54px;
            height: 54px;
    }
    
    .icon-lg svg {
            width : 72px;
            height: 72px;
    }
</style>

Hope this helps – GLHF!

Terrance
Earthman Media