Custom SVG icon

  • Resolved Lioneur

    (@iadminwp)


    3 years, 1 month ago

    Hi, I read how to add my own custom button. It also states to put the custom svg under assets/svg inside the theme folder.
    But I want to create a child plugin and want to read the SVG from the plugin folder.
    Here is your code. but how do I link to custom SVG?

    function prefix_scriptless_add_tumblr_button( $buttons ) {
    $buttons['tumblr'] = array(
        'label'    => __( 'Tumblr', 'scriptless-social-sharing' ),
        'url_base' => 'https://www.tumblr.com/share/link',
        'args'     => array(
            'query_args' => array(
                'name' => '%%title%%',
                'url'  => '%%permalink%%',
            ),
            'color'      => '#35465c',
            'svg'        => 'tumblr-square', // Use this with the SVG icons and add the SVG file to your theme's <code>assets/svg</code> folder
            'icon'       => 'f173', // Use this when using the FontAwesome font for icons
        ),
    );

    return $buttons;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    Yes, the helper function uses the default locations for the SVG icons. You can add additional custom locations to the list, or replace them completely, using a filter. Here is an example of how I have a theme set up to use a custom SVG plugin’s icons, for example:

    
add_filter( 'scriptlesssocialsharing_svg_paths', function( $paths ) {
	if ( defined( 'SIXTENPRESSSVG_DIR_PATH' ) ) {
		$style   = 'solid';
		$setting = get_option( 'sixtenpresssvg', array() );
		if ( ! empty( $setting['style'] ) ) {
			$style = $setting['style'];
		}
		return array(
			SIXTENPRESSSVG_DIR_PATH . "includes/svg/{$style}",
			SIXTENPRESSSVG_DIR_PATH . 'includes/svg/brands',
		);
	}

	return $paths;
} );

    `

    You can use something similar in your plugin to reference its own paths. HTH

    Thread Starter Lioneur

    (@iadminwp)

    Thank you for your help.

    • This reply was modified 3 years, 1 month ago by Lioneur.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom SVG icon’ is closed to new replies.