How to use a custom SVG play button in ARVE Pro

You can also just use CSS to replace the play button with any image.

But WordPress will not let you paste SVG images embedded into CSS into the “Custom CSS” field. It’s also easier to style the SVG with things like hover color change if it’s inline.

Let me just give you an example plugin you can download to read the commented code and use it for your own SVG.

<?php
/**
 * Plugin Name:       ARVE Custom Play Button
 * Plugin URI:        https://nextgenthemes.com/plugins/arve-pro/
 * Description:       Example plugin
 * Version:           1.0
 * Requires PHP:      7.4
 * Requires at least: 6.6
 * Author:            Nicolas Jonas
 * Author URI:        https://nextgenthemes.com
 * License:           GPL-3.0
 * License URI:       https://www.gnu.org/licenses/gpl-3.0.html
 */
namespace Nextgenthemes\ARVE\CustomPlayBtn;

add_filter( 'nextgenthemes/arve/pro/play_svg', __NAMESPACE__ . '\play_svg', 10, 0 );
/**
 * Replaces the default play button SVG with a custom one.
 *
 * @return string The new play button SVG.
 */
function play_svg(): string {

	// This is from bootstrap icons https://icons.getbootstrap.com/icons/play/ license MIT 
	return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16">
  <path d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"/>
</svg>'; 
}

add_action( 'wp_enqueue_styles', __NAMESPACE__ . '\classic_editor_styles' );

function classic_editor_styles(): void {
	if ( ! \Nextgenthemes\ARVE\is_gutenberg() ) {
		enqueue_css();
	}
}

add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_style' );

/**
 * Enqueues the CSS file for the custom play button when the
 * `nextgenthemes/arve-block` block is present on the page.
 */
function enqueue_block_style(): void {
	if ( has_block( 'nextgenthemes/arve-block' ) ) {
		enqueue_css();
	}
}

/**
 * Enqueue the CSS file for the custom play button.
 *
 * This function is hooked on:
 * - `wp_enqueue_styles` for the Classic Editor.
 * - `enqueue_block_assets` for the Block Editor.
 */
function enqueue_css(): void {
	wp_enqueue_style(
		'arve-custom-play-btn',
		plugins_url( 'arve-custom-play-btn.css', __FILE__ ),
		array(),
		filemtime( __DIR__ . '/arve-custom-play-btn.css' )
	);
}

This example CSS controls the size of the SVG and makes it red on hover.

.arve-play-svg--custom {
	width: 150px;
	height: auto;
 }
 
.arve-play-btn:hover .arve-play-svg--custom path:first-child {

	&,
	#html & {
		fill: #cc181e;
		fill-opacity: 1;
	}
}