Home Forums Front-end Issues ACF SVG icon picker frontend php


ACF SVG icon picker frontend php

  • hey guys,

    im running this addon: Advanced Custom Fields: SVG Icon
    Its enabling a svg icon picker and works well so far.

    But i have problems with the frontend code.
    Whats the correct php code to show the icon in my frontend?

    Hope to find some help here… 🙂

  • 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:

    – 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 :

    – 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:

    // 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:

    /* #### 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>" : '';
    /* 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;

    Hope this helps – GLHF!

    Earthman Media

  • Note re: previous code:

    Note: HTML5 SVG tags are used – not compatible in all use cases, see:

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘ACF SVG icon picker frontend php’ is closed to new replies.