SVG Usage Issues

[Fortyfive]

Hi Cooper, using an up to date BFG version I cannot seem to get an inline SVG to display. Can you please offer an example of how to use the icons.svg sprite that's created upon build so I can verify my code is working? Thanks

[Fortyfive]

Quick, update. The ACF SVG select field is outputting the SVG name rathar than the icon. An example of the display code to output the image and verify my code would be helpful if possible.

[cdukes]

I think the simplest case would be: 1) Grab an SVG icon. I used the check.svg in FontAwesome to test 2) Put that SVG as-is, into the svgs folder 3) Run grunt build 4) In a content template, insert echo bfg_get_inline_icon('check');

That should get the checkmark displaying on the frontend.

To make 'check' available option in ACF, create a select-type field, with the name icon. When you pull the meta value, it'll just be the slug of the SVG. You then have to run that through bfg_get_inline_icon to display the icon. Basic example:

$slug = get_post_meta( $post->ID, 'icon', true );
echo bfg_get_inline_icon( $slug );

Example SVG source:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="448" height="448" viewBox="0 0 448 448">
<path fill="#000" d="M417.75 141.5c0 6.25-2.5 12.5-7 17l-215 215c-4.5 4.5-10.75 7-17 7s-12.5-2.5-17-7l-124.5-124.5c-4.5-4.5-7-10.75-7-17s2.5-12.5 7-17l34-34c4.5-4.5 10.75-7 17-7s12.5 2.5 17 7l73.5 73.75 164-164.25c4.5-4.5 10.75-7 17-7s12.5 2.5 17 7l34 34c4.5 4.5 7 10.75 7 17z"></path>
</svg>