Inline SVG Icon Shortcode
Adds an [svg_icon] shortcode with a small built-in set of clean SVG icons, such as check, cross, star, arrow, info, warning, phone and mail, sized to match the surrounding text.
Opens WPIDE on
Code
add_action( 'init', function () {
add_shortcode( 'svg_icon', function ( $atts ) {
$atts = shortcode_atts( array( 'name' => 'check', 'color' => 'currentColor', 'size' => '1em', 'label' => '' ), $atts, 'svg_icon' );
// 24x24 stroke icons.
$paths = array(
'check' => '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
'cross' => '<path d="M6 6l12 12M18 6L6 18"/>',
'star' => '<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/>',
'arrow' => '<path d="M4 12h15M13 6l6 6-6 6"/>',
'info' => '<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/>',
'warning' => '<path d="M12 4l9 16H3z"/><path d="M12 10v4M12 17v.5"/>',
'phone' => '<path d="M6.5 3.5l3 .5 1.5 4-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4 1.5.5 3c0 1-1 2-2 2A16.5 16.5 0 0 1 4.5 5.5c0-1 1-2 2-2z"/>',
'mail' => '<rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3.5 7l8.5 6 8.5-6"/>',
'heart' => '<path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/>',
'clock' => '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
'pin' => '<path d="M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/>',
'download'=> '<path d="M12 4v11M7 10.5l5 5 5-5M5 19.5h14"/>',
);
$name = sanitize_key( $atts['name'] );
if ( ! isset( $paths[ $name ] ) ) {
return '';
}
$a11y = '' !== $atts['label']
? 'role="img" aria-label="' . esc_attr( $atts['label'] ) . '"'
: 'aria-hidden="true" focusable="false"';
return sprintf(
'<svg class="wpide-icon wpide-icon-%1$s" %2$s width="%3$s" height="%3$s" viewBox="0 0 24 24" fill="none" stroke="%4$s" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-0.125em;display:inline-block">%5$s</svg>',
esc_attr( $name ),
$a11y,
esc_attr( preg_replace( '/[^0-9.a-z%]/i', '', $atts['size'] ) ),
esc_attr( $atts['color'] ),
$paths[ $name ]
);
} );
} );
Notes
Example [svg_icon name="check" color="green" label="Included"]; without a label the icon is hidden from screen readers as decoration.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.