The Icon Block: default icons (Examples):
The Icon Block: additonal icons: (Note: these haven’t been sized to be square)
The Icon Block: additonal icons property
The Icon Block: Styling Options
Flip vertical and/or horizontal
Rotate
Width, Margin, Padding, Border (radius, stroke, colour), Icon colour and Background Colour
square icons work in a circle
None square SVG icon
ACF SVG Icon block
The ACF SVG Icon block allows us to add a lottie animated icon:
SVG Icon with PHP
In PHP we have a function for get a file, either image or SVG
<?php
if ( ! function_exists( 'gomo_file' ) ) :
/*
<img src="<?php echo esc_url( gomo_file("assets/images/portpin.png") ); ?>" width="20" height="auto" />
<img src="<?php echo esc_url( gomo_file("assets/svg-icons/map-marked-alt.svg") ); ?>" width="20" height="auto" />
*/
function gomo_file( $file ) {
return GOMO_ACF_PLUGIN_URL . $file;
}
endif;
if ( ! function_exists( 'gomo_icon' ) ) :
/*
<button id="back-to-top">
<?php gomo_icon( 'assets/svg-icons/angle-up.svg', '20', 'svg-white'); ?>
<span class="screen-reader-text">Back to top</span>
</button>
*/
function gomo_icon( $file, $size, $fill ) {
$url = GOMO_ACF_PLUGIN_URL . $file;
?>
<span class="icon <?php echo $fill ?>" aria-hidden="true">
<img src="<?php echo $url; ?>" alt="" class="" width="<?php echo $size ?>" height="auto"/>
</span>
<?php
}
endif;
Needs CSS for the colour filter like this (a black SVG Icon):
.icon.svg-white {
filter: brightness(0) invert(1);
width: 20px;
height: 32px;
display: block;
}
.icon.svg-white img {
width: 20px;
height: 32px;
}