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