WordPress Shortcodes для SVG

Question

Я устал от этих значков, если продолжу, я сломаю свой сайт.

http://slembas.esy.es - посмотрите на круглые круглые кнопки в нижнем колонтитуле.

Я пытаюсь вставить значки SVG. У них должна быть настраиваемая «заливка». Но я не хочу копировать и вставлять один и тот же код везде, потому что, если я что-то меняю в значке, я должен переписать каждый SVG на сайте отдельно. Я просто хочу отредактировать один короткий код, и он автоматически изменится.

Я даю вам, например, значок SVG:

<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" - класс, который должен настроить заливку.

Я не профессионал в области веб-дизайна, особенно в PHP.

Answer 1

Простое решение, чтобы переместить значок в файл, может быть icon_facebook.php или любой другой, а затем использовать include так:

// 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> 

, а затем включить этот значок там, где вам это нужно.

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

Простой и должен соответствовать вашим требованиям. Надеюсь, это поможет.