Path to image in js with wp_localize_script

3 Views

I’m trying to implement animated svg icons into my WordPress theme.
All’s is great, except I can’t figure out how to put proper url for svg images in this js file: 

var svgIconConfig = {
    plus : { 
        url : 'svg/plus.svg',
        animation : [
            { 
                el : 'path:nth-child(1)', 
                animProperties : { 
                    from : { val : '{"transform" : "r0 32 32", "opacity" : 1}' }, 
                    to : { val : '{"transform" : "r180 32 32", "opacity" : 0}' }
                } 
            },
            { 
                el : 'path:nth-child(2)', 
                animProperties : { 
                    from : { val : '{"transform" : "r0 32 32"}' }, 
                    to : { val : '{"transform" : "r180 32 32"}' }
                } 
            }
        ]
    }
};

Here is what I’ve tried:

Read More

in functions.php 

function svgicons_config() {
  wp_register_script('svgicons-config', get_template_directory_uri() . '/js/svgicons-config.js', array(), '1.0.0', 'true'); // Custom scripts
  wp_enqueue_script('svgicons-config');
}

$svg_path = array( 'template_url' => get_bloginfo('template_url') );
wp_localize_script( 'svgicons-config', 'svg_path', $svg_path );

add_action('init', 'svgicons_config');

And in svgicons-config.js: 

url : 'svg_path.template_url+"/svg/plus.svg"',

and few more variations of this. But no luck. I’m almost sure that I’m making some stupid mistake in this part..

Post Views: 3

Related posts

1 comment

  1. Aside from the fact that you shouldn’t use get_bloginfo('template_url'), but rather get_template_directory_uri() or it’s *_stylesheet_*() equivalent, it’s a JavaScript problem: The localized object shouldn’t be wrapped in quotes:

    // Wrong
url : 'svg_path.template_url+"/svg/plus.svg"',

// Right:
url : svg_path.template_url + "/svg/plus.svg",

    When handling JavaScript, simply use console.log( svg_path ) in your script to see the output in your browsers developer tools console.

Comments are closed.