7studio / acf-svg-icon

Add a new ACF field type: "SVG Icon" which allows you to select icon(s) from a SVG sprite.
37 stars 10 forks source link

SVG Sprite vs SVG Font #8

Open evanprimacy opened 4 years ago

evanprimacy commented 4 years ago

Thanks for making such an awesome extension to ACF. Any chance it would be possible to use an SVG Font as well?

I noticed the SVG Sprite needs to be in this format:

<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>

But I have an SVG Font in this format:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <font id="icons" horiz-adv-x="768">
    <font-face font-family="icons"
      units-per-em="1000" ascent="1000"
      descent="0" />
    <missing-glyph horiz-adv-x="0" />
    <glyph glyph-name="alert-error-outline"
      unicode="&#xF103;"
      horiz-adv-x="1000" d=" M500 166Q637 166 735 265T834 500T735 735T500 834T265 735T166 500T265 265T500 166zM500 916Q672 916 794 794T916 500T794 206T500 84T206 206T84 500T206 794T500 916zM459 709H541V459H459V709zM459 375H541V291H459V375z" />
  </font>
</defs>
</svg>

Would it be possible to make it work? :)

7studio commented 3 years ago

Hi @evanprimacy,

I haven't been using PHP and WordPress for two years now and I have no time to find a solution to your need sorry.

IMHO SVG Font is a bad practice but if someone wants to submit a PR, he is welcomed.