Inline SVG in Custom Walker

  • Alicia

    (@amduffy)


    11 years, 12 months ago

    I’ve added an inline SVG sprite to the header of my WordPress site using this method: http://blog.teamtreehouse.com/perfect-wordpress-inline-svg-workflow

    In a custom menu walker I output an icon with each item

    $item_output .= '<svg viewBox="0 0 50 50" class="icon">
                                <use xlink:href="#icon-activities"></use>
                            </svg>';

    The icons render blank in all browsers except for (oddly enough) IE10. When I include an SVG icon right below the navigation as plain markup they render fine:

    <svg viewBox="0 0 50 50" class="icon">
    <use xlink:href="#icon-activities"></use>
</svg>

    Could this be because the navigation is added after the template markup?

Viewing 4 replies - 1 through 4 (of 4 total)
  • rbgiddings

    (@rbgiddings)

    11 years, 9 months ago

    I was trying to find a way to do the exact same thing.

    However, I’m using the “get_template_part” method outlined in the article referenced above (http://blog.teamtreehouse.com/perfect-wordpress-inline-svg-workflow).

    I’m not too familiar with custom walkers, but it sounds like a reasonable solution. Basically, what I want is this code for each menu item:

    <li><a href="[menu item url]"><?php get_template_part( 'img/icons/inline', '[slug of menu item].svg' ); ?>Menu Item</a></li>

    So that an inline SVG icon gets inserted right before the text of the menu item, and that icon is selected based on the slug for the menu item itself. So that a menu item of “Product List” that has a page slug of “product” would grab the img/icon/inline-product.svg.php template part.

    Any help or suggestions would be appreciated!

    Damon Cook

    (@colorful-tones)

    11 years ago

    Alicia, I would love to see what you came up with for a custom walker in this regard. Did you end up finding a workable solution? Care to share please (blog article, or Gist)?

    rbgiddings

    (@rbgiddings)

    11 years ago

    Hi, Damon! I’ve seen two successful ways of inserting icons before menu items in WordPress:

    WPMU DEV posted this tutorial that uses the FontAwesome icon font: http://premium.wpmudev.org/blog/add-icons-wordpress-menus

    (I’ve had great success with fontastic.me for creating custom icon fonts if you want to use your own icons.)

    I also came up with a messy but effective solution that you can see here: http://rebeccabgiddings.com/2014/09/adding-svg-icon-wordpress-menu-items

    Hope this helps!

    Damon Cook

    (@colorful-tones)

    11 years ago

    Thanks rbgiddings!

    I’m trying to steer clear of icon fonts, because they’re not rendered as consistently and was having issues with Font Awesome specifically.

    Inline SVG is way to go, and I forgot that you can actually add HTML to the Navigation Label as you demonstrate in your post. Thanks, and that is a big help!

    Also, @gregrickaby wrote a helpful template function to allow you to easily add in themes if you’re interested: https://github.com/WebDevStudios/_s/blob/svg/inc/template-tags.php#L270

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Inline SVG in Custom Walker’ is closed to new replies.

Tags