Welcome to the Advanced Custom Fields SVG Icon repository on Github.
First ideas of this plugin come from BeAPI/acf-svg-icon but they were reorganised and enhanced by my mind 😋
Add a new ACF field type: "SVG Icon" which allows you to select icon(s) from a SVG sprite.
This plugin works only with the ACF PRO (version 5.5.0 or higher).
There are three possible ways to use this feature.
acf/fields/svg_icon/file_path- filter for every fieldacf/fields/svg_icon/file_path/name={$field_name}- filter for a specific field based on its nameacf/fields/svg_icon/file_path/key={$field_key}- filter for a specific field based on its key
add_filter( 'acf/fields/svg_icon/file_path', 'tc_acf_svg_icon_file_path' );
function tc_acf_svg_icon_file_path( $file_path ) {
return get_theme_file_path( 'assets/icons/icons.svg' );
}There are four possible ways to use this feature.
The first three ones are offered by filter hooks like all ACF fields:
acf/fields/svg_icon/symbols- filter for every fieldacf/fields/svg_icon/symbols/name={$field_name}- filter for a specific field based on its nameacf/fields/svg_icon/symbols/key={$field_key}- filter for a specific field based on its key
add_filter( 'acf/fields/svg_icon/symbols/name=icon', 'tc_acf_svg_icon_symbol' );
function tc_acf_svg_icon_symbol( $symbols ) {
$symbols_data = array(
'IconTwitter' => array(
'title' => 'Twitter'
),
'IconFacebook' => array(
'title' => 'Facebook',
'default_color' => '#3b5998'
)
);
foreach ( $symbols_data as $id => $data ) {
if ( array_key_exists( $id, $symbols ) ) {
$symbols[ $id ] = array_merge( $symbols[ $id ], $data );
}
}
return $symbols;
}By the way, you can also use this filter to reduce the list of SVG symbols ;)
But if you are lazy (like me) and you are afraid of forgetting to update your filter hook for translations, you can use the fourth (and the better) way:
<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 are able to define all your symbols' data into a special HTML comment <!-- swp-acf-si:{symbol_ID} {key:value} --> (like Gutenberg settings storage) for each symbols.
<?php $icon = get_field( 'icon' ); ?>
<div class="Icon" style="color:<?php echo esc_attr( $icon['default_color'] ); ?>">
<svg widht="64" height="64">
<title><?php echo esc_html( $icon['title'] ); ?></title>
<use xlink:href="<?php echo esc_url( "{$icon['_file_url']}#{$icon['ID']}" ); ?>"></use>
</svg>
</div>If you use SVGO or something else to optimise your SVG files, you should turn off the remove comments option to keep the plugin extra comments.
If you use SVGO and allowed to add a custom task, you can copy/paste the code below to turn off the removeComments task and register a new one which removes comments except if it's important (default behaviour <!--! my important comment -->) and if it's needed by ACF SVG Icon Field as well.
{
removeComments: false
},
{
stripComments: {
type: 'perItem',
description: 'strips comments',
params: {},
fn: (item, params) => {
if (!item.comment) {
return;
}
if (item.comment.charAt(0) !== '!' && ! /^swp-acf-si:/.test(item.comment)) {
return false;
}
}
}
}- Add compatibility for ACF Pro 5.7.x
- Introduce SVGO custom task
stripComments - Fix mistakes in README
- Initial Release.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent