WordPress SVG的简码

Question

I'm tired of these icons, if I continue I will break my site.

http://slembas.esy.es - look at the red round buttons in the footer.

I'm trying to insert SVG icons. They should have customisable "fill". But I don't want to copy and paste the same code everywhere, because if I change something in icon, I must rewrite every SVG in the site separately. I just want to edit one shortcode and it would change all automatically.

I give you for example an SVG icon:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
  <path class="button-icon" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z"
  />
</svg>

class="button-icon" - the class that should customise the fill.

I'm not a pro in web-designing, especially in PHP.

Answer 1

A simple solution is to move the icon into a file, maybe icon_facebook.php or whatever, and then use include like so:

// icon_facebook.php
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
  <path class="button-icon" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg>

and then include that icon wherever you need it.

// some_page.php
  ...
  include 'icon_facebook.php';

Simple and should meet your requirements. Hope that helps.