7studio / acf-svg-icon Goto Github PK
View Code? Open in Web Editor NEWAdd a new ACF field type: "SVG Icon" which allows you to select icon(s) from a SVG sprite.
Add a new ACF field type: "SVG Icon" which allows you to select icon(s) from a SVG sprite.
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=""
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? :)
Hello,
I use your plugin on a SP multisite on my main webiste the svg load well in the back office, but in the other website (with my same custom them), it said Vous devez choisir un sprite SVG via le hook acf/fields/svg_icon/file_path pour utiliser le champ correctement.
.
Any idea ?
Thanks for this great plugin
Hey 7studio,
thanks for your great work with this plugin. Would you consider making it available via composer, especially since it's not in the WordPress plugin directory?
( ! ) Notice: acf_get_dir is deprecated since version 5.6.8! Use acf_get_url() instead. in /public/wp-includes/functions.php on line 4565
Call Stack
1 0.0001 412232 {main}( ) .../post.php:0
2 0.3782 9782032 include( '/public/wp-admin/edit-form-advanced.php' ) .../post.php:198
3 0.3844 9840376 require_once( '/public/wp-admin/admin-header.php' ) .../edit-form-advanced.php:419
4 0.3857 9850224 do_action( ) .../admin-header.php:104
5 0.3857 9850600 WP_Hook->do_action( ) .../plugin.php:478
6 0.3857 9850600 WP_Hook->apply_filters( ) .../class-wp-hook.php:312
7 0.3865 9860824 ACF_Assets->admin_enqueue_scripts( ) .../class-wp-hook.php:288
8 0.3879 9887856 do_action( ) .../assets.php:235
9 0.3879 9888232 WP_Hook->do_action( ) .../plugin.php:478
10 0.3879 9888232 WP_Hook->apply_filters( ) .../class-wp-hook.php:312
11 0.3887 9897544 swp_acf_field_svg_icon->input_admin_enqueue_scripts( ) .../class-wp-hook.php:286
12 0.3887 9897624 acf_get_dir( ) .../class-swp-acf-svg-icon-v5.php:387
13 0.3887 9897624 _deprecated_function( ) .../deprecated.php:145
14 0.3888 9897944 trigger_error ( ) .../functions.php:4565
Is the icon preview supposed to show up automatically?
I've managed to add titles and remove some unneeded symbols but Select2 only shows the icon's title without any kind of preview. data-file_url
on the <select>
element points to the right location of my sprite.
Here's a preview of my SVG file in case it helps:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 75 75" id="euro" xmlns="http://www.w3.org/2000/svg">
<path d="M11 41.2h7c-.1-1.3-.2-2.6-.2-3.8 0-1.1.1-2.2.2-3.5h-7V27h8.3c1.8-5.9 5.6-11 10.7-14.4 5-3.3 10.8-5.1 16.7-5.1 6.2 0 11.2 1.4 15.1 4.2l-3.5 6.8c-3.4-2.3-7.5-3.5-11.6-3.3-3.9 0-7.7 1-11.1 3-3.3 2-5.9 5.1-7.3 8.8h25.9l-3.5 6.9h-24c-.2 1.2-.3 2.4-.3 3.5 0 1.3.1 2.5.3 3.8h21l-3.5 7.1H28.5c1.4 3.6 3.9 6.6 7.2 8.6 3.3 2 7 3 10.8 2.9 5.6 0 10-1.6 13.2-4.8l4.3 6.2c-4.9 4.2-11.1 6.4-17.5 6.3-5.8 0-11.6-1.7-16.4-5-5-3.4-8.8-8.4-10.6-14.2H11v-7.1z" />
</symbol>
<symbol viewBox="0 0 75 75" id="yuan" xmlns="http://www.w3.org/2000/svg">
<path d="M58.1 53.1H42.5v14.4h-9V53.1H17.9v-6.7h15.6V39H17.9v-6.6h10.8l-15.8-25h10.6L38 31.7 51.8 7.5h10.4L47 32.5h11v6.6H42.5v7.4h15.6v6.6z" />
</symbol>
</svg>
Hey, this version 1.01 does no longer work with ACF Version 6.0 after their visual update.
I get an error message and cannot open my fields because the javascript is breaking:
Uncaught TypeError: Cannot read properties of undefined (reading 'allow_null')
Not sure if this is a quick fix or a deeper issue. I might take a look at it myself the next days.
Hi 7studio, great work!
One thing I noticed is that it assumes that the svg icons are in (a subfolder of) the theme folder. I was trying to add them packaged as a plugin but the str_replace() on the load_field() callback was preventing my icons from displaying.
I added two extra filters as a workaround to be able to set both search and replace parameters, now my svg can be located in that plugin-folder too.
Looking for people who want to maintain and further develop this. I haven't done a good job of working on it because I don't use PHP and WordPress for three years now. Let me know if you're interested.
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.