The Icon Block, ACF SVG Icon Block, and Media PHP

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