/inc/icon-functions.phpを編集する。
/**
* Add SVG definitions to the footer.
*/
function mysite_include_svg_icons() {
// Define SVG sprite file.
$svg_icons = get_parent_theme_file_path( ‘/images/svg-mysite-mark.svg’ );
// If it exists, include it.
if ( file_exists( $svg_icons ) ) {
require_once( $svg_icons );
}
}
add_action( ‘wp_footer’, ‘mysite_include_svg_icons’, 9999 );
SVGファイルの中身
<svg style=”position: absolute; width: 0; height: 0; overflow: hidden;” version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>
<defs>
<symbol id=”single-head-plus” viewBox=”0 0 100 100″>
<path class=”pluscol” d=”M100,40.7c0-2.2-1.8-4-4-4H67.3c-2.2,0-4-1.8-4-4V4c0-2.2-1.8-4-4-4H40.7c-2.2,0-4,1.8-4,4v28.7
c0,2.2-1.8,4-4,4H4c-2.2,0-4,1.8-4,4v18.7c0,2.2,1.8,4,4,4h28.7c2.2,0,4,1.8,4,4V96c0,2.2,1.8,4,4,4h18.7c2.2,0,4-1.8,4-4V67.3
c0-2.2,1.8-4,4-4H96c2.2,0,4-1.8,4-4V40.7z”/></path>
</symbol>
この場合pluscolというcssのクラス名で色等が指定できる。
<symbol id=”category-search-mark” viewBox=”0 0 35 31.3″>
<style type=”text/css”>
.st1{fill:#FFFFFF;}
</style>
st1というクラス名で色を指定している。
<g>
<path class=”st0″ d=”M19.2,5c-1.1,0-2.7-0.6-3.4-1.4l-2.2-2.2C12.8,0.6,11.2,0,10.1,0H2C0.9,0,0,0.9,0,2v27.3c0,1.1,0.9,2,2,2h31
c1.1,0,2-0.9,2-2V7.1c0-1.1-0.9-2-2-2H19.2z”/>
<path class=”st1″ d=”M26.1,16.7c0-0.4-0.3-0.7-0.7-0.7h-4.9c-0.4,0-0.7-0.3-0.7-0.7v-4.9c0-0.4-0.3-0.7-0.7-0.7h-3.2
c-0.4,0-0.7,0.3-0.7,0.7v4.9c0,0.4-0.3,0.7-0.7,0.7H9.6c-0.4,0-0.7,0.3-0.7,0.7v3.2c0,0.4,0.3,0.7,0.7,0.7h4.9
c0.4,0,0.7,0.3,0.7,0.7v4.9c0,0.4,0.3,0.7,0.7,0.7h3.2c0.4,0,0.7-0.3,0.7-0.7v-4.9c0-0.4,0.3-0.7,0.7-0.7h4.9
c0.4,0,0.7-0.3,0.7-0.7V16.7z”/>
</g>
</symbol>
</defs>
</svg>
svgファイル内のデータは最後のfooter部分で読み込まれる。
使うときはHTML内で
<div class=”plus-icon”><svg class=”icon single-head-plus” aria-hidden=”true” role=”img”> <use href=”#single-head-plus” xlink:href=”#single-head-plus“></use> </svg></div>
などと指定する。