Issues when adding a new icon

  • I’m trying to add a custom icon for Strava to the Simple Social Icons. I have a relatively new install of WordPress 4.7, with Simple Social Icons v2.0.1.

    I’m attempting to follow instructions as posted; here’s what I did:

    (1) First I copy-pasted facebook.svg as strava.svg in the simple-social-icons/icons/SVG folder just so I would have a new SVG file. I then edited the new strava.svg XML to add the id and to match the Xml in the instructions so it now looks like this:

    <svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <defs>
        <symbol id="social-strava" viewBox="0 0 32 32">
            <title>Strava</title>
            <path d="M23.738.214v4.714h-2.804c-1.023 0-1.714.214-2.071.643s-.536 1.071-.536 1.929v3.375h5.232l-.696 5.286h-4.536v13.554h-5.464V16.161H8.309v-5.286h4.554V6.982c0-2.214.62-3.932 1.857-5.152S17.607 0 19.666 0c1.75 0 3.107.071 4.071.214z"/>
        </symbol>
    </defs>
</svg>

    (2) Then, I added the following code to my functions.php:

    //* Add Strava Simple Social Icons widget
add_filter( 'simple_social_default_profiles', 'add_strava_simple_icon' );
function add_strava_simple_icon( $icons ) {
    $icons['strava-icon'] = [
        'label'   => __( 'Strava URI', 'simple-social-icons' ),
        'pattern' => '<li class="social-strava"><a href="%s" %s><svg role="img" class="social-strava-svg" aria-labelledby="social-strava"><title id="social-strava">' . __( 'Strava', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#social-strava' ) . '"></use></svg></a></li>', 
   ];
    return $icons;
}

    This seems to work partly, as I do see a new entry for Strava in the widget where I can enter the Strava URI, however, the image on the published website that shows up is plain black, and not the facebook SVG I copy-pasted. Is there another place where I need to upload/create an icon?

    I am using the Genesis framework with the eleven40 theme. I have published the widget changes to my website to show the actual behavior.

    Thanks
    Ameya

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Nick C

    (@modernnerd)

    Hi, @ameyabarve

    The path to your new strava.svg file appears to be incorrect.

    Your site is returning a 404 for a file named ‘my.svg’ at this location (note wp-content appears twice and file is named my.svg rather than strava.svg):

    – https://ameya.net/wp-content/plugins/home4/ameyabarve/public_html/wp-content/themes/eleven40-pro/my.svg#social-strava

    If your strava.svg file is in the Simple Social Icons plugin directory root, you could use the correct path in place of esc_url(…) in functions.php:

    'https://ameya.net/wp-content/plugins/simple-social-icons/strava.svg#social-strava'

    If instead the file is in your theme directory, you can use get_stylesheet_directory_uri() instead:

    esc_url( get_stylesheet_directory_uri() . '/strava.svg#social-strava' )

    Or the bare link to the file:

    'https://ameya.net/wp-content/themes/eleven40-pro/strava.svg#social-strava'

    (I couldn’t see a strava.svg file at either location, so you’ll need to adjust the above with the correct path or move the file.)

    Either way I recommend checking where the file is located, then making sure the path in your functions.php matches. Your browser’s console will show warnings whenever the path is wrong:

    console warnings for missing svg file

    • This reply was modified 8 years, 2 months ago by Nick C.
    Thread Starter Ameya Barve

    (@ameyabarve)

    Hi Nick,

    Thanks for the detailed explanation. I copied the strava.svg file to the plugin root folder and the following code worked:

    //* Add Strava Simple Social Icons widget
add_filter( 'simple_social_default_profiles', 'ameya_add_strava_simple_icon' );
function ameya_add_strava_simple_icon( $icons ) {
    $icons['strava-icon'] = [
        'label'   => __( 'Strava URI', 'simple-social-icons' ),
        'pattern' => '<li class="social-strava"><a href="%s" %s><svg role="img" class="social-strava-svg" aria-labelledby="social-strava"><title id="social-strava">' . __( 'Strava', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'strava.svg#social-strava' ) . '"></use></svg></a></li>', 
   ];
    return $icons;
}

    Curiously if I copy the strava.svg to the “wp-content/plugins/simple-social-icons/icons/SVG/” folder, then neither using “esc_url( plugin_dir_url(__FILE__) . ‘icons/SVG/strava.svg#social-strava'” or even a direct link to that location seemed to work.

    Also, I’m new to customizing plugins, so what would you say is the recommended best practice as to where I should keep the strava.svg file? Should I keep it in the Simple Social Icons plugin root folder (as it is now) or would you recommend I move it someplace else?

    Ameya

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Issues when adding a new icon’ is closed to new replies.

Tags