Как к svg применить несколько классов?

[CHADREX]

Есть кусок кода (архив прикреплен), там два одинаковых блока. Как к одному из блоков применить независимый класс с другим цветом.

Проще говоря я хочу получить такой результат при использовании одной иконки:
Для просмотра ссылки Войди или Зарегистрируйся

 

[funnywheel]

Вкладывай svg в контейнер, чтобы было вида:

<div class="svg-icon svg-icon-red"><?php require "/path/to/file.svg"; ?></div>
<div class="svg-icon svg-icon-blue"<?php require "/path/to/file.svg"; ?></div>

и стилизуй через css:

.svg-icon-red {
  fill: #ff0000;
}
.svg-icon-blue {
  fill: #336699;
}

чтобы svg стилизовать через css - надо чтобы он был подключен не как аттрибут у img, а как текст.
я себе набросал простенькую функцию, использую в WP-темах, кочует из проекта в проект:

<?php
function svg( $filename, $return = false ) {
  $path = 'svg/' . $filename . '.svg';
  if( $return == false ) {
    @require $path;
  } else {
    return $path;
  }
}
?>

Пример использования:

<div class="logo"><?php svg( 'logo' ); ?></div>

У меня базовая структура темы всегда одинаковая, потому svg-файлы всегда живут в корне темы, в папке svg.
В функцию передаем имя файла без расширения - функция нам его подключает.
Если передадим второй параметр true - то функция вернет путь к файлу, вместо того чтобы подключить файл.

UPD: удали лишние кишки из svg-файла. Копирайты иллюстратора, id ненужный на кириллице, это все будет в коде.

 

[CHADREX]

Для просмотра ссылки Войди или Зарегистрируйся

все намного проще через елемент <use>

Забыл упомянуть, svg должен подключаться по ссылке, а не быть встроенный в html

 

[CHADREX]

Всем спасибо, особенно funnywheel. Вариант довольно удобный, не знаю как на вп будет себя вести, но на локалке работает отменно.
Не надо хоть использовать тяжеловесный icomoon

 

[ultra]

я просто оставлю это здесь
Для просмотра ссылки Войди или Зарегистрируйся

 

[CHADREX]

я просто оставлю это здесь
Для просмотра ссылки Войди или Зарегистрируйся

Увы, он не работает. Для просмотра ссылки Войди или Зарегистрируйся
К примеру я выставил цвет иконке, он не поменялся.
С таким раскладом равносильно что вставлять через img

 

[ultra]

Увы, он не работает. Для просмотра ссылки Войди или Зарегистрируйся

и не будет, даже если в подобных редакторах все правильно подключить
в папке examples есть примеры
первый попавшийся селфхостед Для просмотра ссылки Войди или Зарегистрируйся

 

[CHADREX]

и не будет, даже если в подобных редакторах все правильно подключить
в папке examples есть примеры
первый попавшийся селфхостед Для просмотра ссылки Войди или Зарегистрируйся

Брал пример из папки simple, хотя может забыл библиотеку подключить.

 

[CHADREX]

А как такой способ можно заставить работать на wordpress? Он какбы запрещает использование php при вставке на страницу/запись.

 

[funnywheel]

А как такой способ можно заставить работать на wordpress? Он какбы запрещает использование php при вставке на страницу/запись.

Я может не совсем правильно понял вопрос, если что - уточни.

Я вставляю svg-файлы в файлы шаблонов. Ничего не запрещает выполнить этот код. Он полностью готов, просто положи в functions.php и вызови в нужном месте. Если пути к svg-файлам будут отличаться от моих (у меня в корне темы есть директория svg) - поправь путь в функции.

Если есть необходимость вставлять в редакторе (я так понимаю речб об этом в вопросе) - дописать шорткод, который будет вызывать эту функцию.