Instantly share code, notes, and snippets.

Embed
What would you like to do?
Change Scriptless Social Sharing links to use SVG icons instead of CSS pseudo elements
<?php
add_filter( 'scriptlesssocialsharing_link_markup', 'leaven_modify_scriptless_link_markup', 10, 2 );
/**
* Add SVG icons to Scriptless sharing buttons.
*
* @param $output
*
* @param $button
*
* @return string
*/
function leaven_modify_scriptless_link_markup( $output, $button ) {
return sprintf( '<a class="button %s" target="_blank" href="%s" rel="noopener" %s>%s<span class="sss-name">%s</span></a>',
esc_attr( $button['name'] ),
esc_url( $button['url'] ),
$button['data'],
leaven_get_svg( $button['name'] ),
$button['label']
);
}
.sss-name {
margin-left: 12px;
}
<?php
/**
* Get markup for an SVG icon.
*
* @param string $icon
*
* @param array $args
*
* @return string
*/
function leaven_get_svg( $icon, $args = array() ) {
$defaults = array(
'title' => '',
'desc' => '',
'fallback' => false,
);
$args = wp_parse_args( $args, $defaults );
$aria_hidden = ' aria-hidden="true"';
$aria_labelledby = '';
$title = '';
$fallback = '';
if ( $args['title'] ) {
$aria_hidden = '';
$unique_id = uniqid();
$aria_labelledby = ' aria-labelledby="title-' . $unique_id . '"';
$title = sprintf( '<title id="title-%s">%s</title>',
$unique_id,
esc_html( $args['title'] )
);
if ( $args['desc'] ) {
$aria_labelledby = ' aria-labelledby="title-' . $unique_id . ' desc-' . $unique_id . '"';
$title .= sprintf( '<desc id="desc-%s">%s</desc>',
$unique_id,
esc_html( $args['desc'] )
);
}
}
if ( $args['fallback'] ) {
$fallback = '<span class="svg-fallback icon-' . esc_attr( $icon ) . '"></span>';
}
return sprintf( '<svg class="icon %1$s" role="img"%2$s%3$s>%4$s <use xlink:href="#%1$s"></use> %5$s</svg>',
esc_attr( $icon ),
$aria_hidden,
$aria_labelledby,
$title,
$fallback
);
}
add_filter( 'wp_kses_allowed_html', 'leaven_filter_allowed_html', 10, 2 );
/**
* Allow SVG in wp_kses_post output.
* @param $allowed
* @param $context
*
* @return mixed
*/
function leaven_filter_allowed_html( $allowed, $context ) {
if ( 'post' === $context ) {
$allowed['svg'] = array(
'class' => true,
);
$allowed['use'] = array(
'xlink:href' => true,
);
}
return $allowed;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment