no load svg

[CaporalJuju]

i have this error : You must choose an SVG sprite via the hook acf/fields/svg_icon/file_path to use this field correctly.

My file is on theme path /font/icomoon.svg return get_theme_file_path( ).'font/icomoon.svg';

echo path : /Users/sophe/Google Drive/host/maudits/jobsenior/wp-content/themes/jobsenior/font/icomoon.svg

Can you help me ?

[7studio]

Hi @CaporalJuju,

I will try to help you :relaxed: You have this error because the plugin couldn't extract <symbol>s from your sprite icomoon.svg. Can you provide me the content of this file please?

[CaporalJuju]

it's a iconmoon svg sprit

icomoon.svg.zip thanks

[7studio]

I'm sorry @CaporalJuju but this plugin can't work with your IcoMoon Font file. Your file structure is:

<svg xmlns="http://www.w3.org/2000/svg">
    <metadata>Generated by IcoMoon</metadata>
    <defs>
        <font id="icomoon" horiz-adv-x="1024">
            <font-face units-per-em="1024" ascent="870.4" descent="-153.6" />
            <missing-glyph horiz-adv-x="1024" />
            <glyph unicode="&#x20;" d="" />
            <glyph unicode="&#xe900;" d="…" />
            …
        </font>
    </defs>
</svg>

and the plugin needs a structure like below (with <symbol> and id=""):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="BackgroundShape" fill="#efefef" stroke="none" d="…" />
    </defs>
    <!--swp-acf-si:IconTwitter {"title":"Twitter"}-->
    <symbol id="IconTwitter" viewBox="0 0 256 256">
        <use xlink:href="#BackgroundShape" />
        <path fill="currentColor" stroke="none" d="…"/>
    </symbol>
    <symbol id="IconFacebook" viewBox="0 0 256 256">
        <!-- swp-acf-si:IconFacebook {"title":"Facebook", "default_color":"#3b5998"} -->
        <use xlink:href="#BackgroundShape" />
        <g fill="currentColor" stroke="none">
            <path d="…"/>
            <path d="…"/>
        </g>
    </symbol>
</svg>

You may export/generate your icons as SVG not as Font with IcoMoon. But be careful because this behaviour will change a lot of things in your development and use.

I hope that will help you to use this plugin. Xavier.

[CaporalJuju]

Thanks !