Additional Nucleo Icons

[Ben]

I own the Nucleo family and was wondering if there is a way I could add more icons to be available in the Page Builder? Would save me a bunch of time. Thanks for your help. Ben

[David Martin – Support]

Hi Ben,

This is an option currently being worked on, planned for a big improved update. There is a related thread for this:

http://www.swiftideas.com/forums/topic/updating-svg-icons/page/2/.

Thanks.

[WEswift]

I would love to be able to do this as well. Any progress on this?

[Rui Guerreiro – SUPPORT]

Hi,

Will forward to the development team to see if there is any update on this.

-Rui

[Swift Ideas – Ed]

Hi there,

This is already implemented, simply use this folder structure in your child theme, with the svg icons within:

Hope that helps.

– Ed

[WEswift]

I’m not able to get this to work. I thought it was, but it was actually the fact that I had some duplicate svgs that were also already in the theme. Thoughts?

[WEswift]

Specifically, I’m trying to find the new icons within the Icon Box svg listing. Is there a different way I’m supposed to add these to content? Or should they appear in this and other pre-created svg lists for Swift Builder Elements?

[Swift Ideas – Ed]

Apologies, forgot that you’ll also need this code in your child theme functions.php file:

	/* ADD PAGE BUILDER SVG ICONS
	================================================== */
	if ( !function_exists( 'spb_child_theme_svg_icons' ) ) {
        function spb_child_theme_svg_icons( $svg_icons ) {

            // Check if we can access files
            if ( !function_exists('glob') ) {
                return $svg_icons;
            }

            // Path to directory to scan
            $folder = '/swift-builder-icons/svg/';
            $directory = get_stylesheet_directory() . $folder;
            $uri = get_stylesheet_directory_uri() . $folder;

            // Get all svg files
            $svgs = glob($directory . "*.svg");

            // If no files, return
            if ( empty($svgs) ) {
                return;
            }

            // Add each icon to array
            foreach($svgs as $svg) {
                $svg = basename($svg);
                $key = $uri . $svg;
                if ( !array_key_exists( $key, $svg_icons ) ) {
                    $svg_icons[ $key ] = $svg;
                }
            }

            // Return array
            return $svg_icons; 
        }
        add_filter( 'spb_svg_icons_list', 'spb_child_theme_svg_icons' );
    }

– Ed

[WEswift]

Ed – Thanks for the swift response. Unfortunately, now the word “Array” appears in the svg list. Thoughts?

[Swift Ideas – Ed]

Sorry, the code should be:

	/* ADD PAGE BUILDER SVG ICONS
	================================================== */
	if ( !function_exists( 'spb_child_theme_svg_icons' ) ) {
        function spb_child_theme_svg_icons( $svg_icons ) {

        	if ( !$svg_icons ) {
        		$svg_icons = array();
        	}

            // Check if we can access files
            if ( !function_exists('glob') ) {
                return $svg_icons;
            }

            // Path to directory to scan
            $folder = '/swift-builder-icons/svg/';
            $directory = get_stylesheet_directory() . $folder;
            $uri = get_stylesheet_directory_uri() . $folder;

            // Get all svg files
            $svgs = glob($directory . "*.svg");

            // If no files, return
            if ( empty($svgs) ) {
                return;
            }

            // Add each icon to array
            foreach($svgs as $svg) {
                $svg = basename($svg);
                $key = $uri . $svg;
                if ( !array_key_exists( $key, $svg_icons ) ) {
                    $svg_icons[ $key ] = $svg;
                }
            }

            // Return array
            return $svg_icons; 
        }
        add_filter( 'spb_svg_icons_list', 'spb_child_theme_svg_icons' );
    }

Just tested locally and it worked fine for me – are you adding svg files to that folder?

– Ed

[BillO]

I followed the instructions above and could not get this to work. The svg files inside the svg directory use the following naming convention:

sport-48px-outline_trophy.svg
tech-48px-outline-2_p-check.svg

The original parent theme svg files are still appearing in the Swift Builder.

Any assistance would be greatly appreciated.

[BillO]

After double-checking, the word “Array” appears in the svg list as mentioned by WEswift. However, I’m using your second code block above not the first that WEswift reported earlier.

[Swift Ideas – Ed]

Hi @BillO

Any chance you could provide those files for us to try locally? Also, are you able to view those svg files in your browser window when visiting the live file link?

– Ed

[BillO]

This reply has been marked as private.

[Swift Ideas – Ed]

I adjusted the code, and this should work now!

/* ADD PAGE BUILDER SVG ICONS
	================================================== */
	if ( !function_exists( 'spb_child_theme_svg_icons' ) ) {
        function spb_child_theme_svg_icons( $svg_icons ) {

        	if ( !$svg_icons ) {
        		$svg_icons = array();
        	}

            // Check if we can access files
            if ( !function_exists('glob') ) {
                return $svg_icons;
            }

            // Path to directory to scan
            $folder = '/swift-builder-icons/svg/';
            $directory = get_stylesheet_directory() . $folder;
            $uri = get_stylesheet_directory_uri() . $folder;

            // Get all svg files
            $svgs = glob($directory . "*.svg");

            // If no files, return
            if ( empty($svgs) ) {
                return;
            }

            // Add each icon to array
            foreach($svgs as $svg) {
                $svg = basename($svg);
                $key = $uri . $svg;
                if ( !array_key_exists( $key, $svg_icons ) ) {
                    $svg_icons[ $key ] = $svg;
                }
            }

            // Output
            $svg_icon_output = "";
            foreach ( $svg_icons as $icon => $name ) {
       			$svg_icon_output .= '<li class="svg-icon" data-icon="'.$name.'" data-path="'.$icon.'"><i class="svg-icon-picker-item" style="background-image: url('.$icon.');"></i></li>';
        	}
        	return $svg_icon_output;
        }
        add_filter( 'spb_svg_icons_list', 'spb_child_theme_svg_icons' );
    }

– Ed