.icon {
display: inline-block;
min-width: 5px;
min-height: 5px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.icon.icon-print {
background-image: url('../images/icons/print.svg');
min-width: 20px;
min-height: 20px;
}
<i class="icon icon-print"></i>
Create a file named sprite.svg
<svg> <symbol id="fb-icon" viewbox="-20 -20 200 200"> <path fill="white" d="M91.84,71.34l3.37-21.99h-21.1V35.08c0-6.02,2.95-11.88,12.4-11.88h9.59V4.49c0,0-8.7-1.49-17.03-1.49 C61.7,3,50.35,13.53,50.35,32.59v16.76H31.04v21.99h19.31v53.15h23.77V71.34H91.84z"/></path> </symbol> </svg>
Paste this in functions.php
function add_image_sprite_map(){
include('assets/images/sprite.svg');
}
add_action('storefront_before_header', 'add_image_sprite_map');
Use the icon wherever You want
<a target="_blank" href="" rel="noopener noreferrer">
<svg class="fb-svg"><use xlink:href="#fb-icon" /></svg>
</a>
// =========================================================================
// CUSTOM SVG LOGO
// =========================================================================
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
function add_sprite_map(){
include('images/sprite-map.svg');
}
add_action('genesis_before', 'add_sprite_map');
function add_svg_logo_to_header(){
if(is_front_page()){
echo '
<div id="site-logo">
<h1>
<a href="'.home_url().'">
<svg class="svg-logo">
<use xlink:href="#YOUR_SVG_ID" />
</svg>
</a>
</h1>
</div>';
}
else{
echo '
<div id="site-logo">
<h4>
<a href="'.home_url().'">
<svg class="svg-logo">
<use xlink:href="#YOUR_SVG_ID" />
</svg>
</a>
</h4>
</div>';
}
}
add_action('genesis_site_title', 'add_svg_logo_to_header');
//ALLOW SVG UPLOAD ONLY FOR ADMINISTRATORS
function cc_mime_types($mimes) {
if ( current_user_can( 'manage_options' ) ) {
$mimes['svg'] = 'image/svg+xml';
}
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');