svgartru2016

Могу посоветовать такую последовательность действий:
1. Сначала очищаете от всего лишнего SVG файлы с помощью онлайн утилиты SVG-Editor автор Peter Collingridge
Убирает всё лишнее. Пользуюсь много лет. Файл становится в разы меньше, качество изображения не страдает.
2. А дальше придется ручками присвоить каждой иконке свой id=" " и класс контейнеру, в который будет обернута иконка в HTML файле.
3.Далее при помощи команд getElementById находите иконку и красите её setAttribute("fill","yellowgreen")
4. Конкретные примеры ниже в ссылках
https://jsfiddle.net/Alexandr_T/7e6yka38/
https://jsfiddle.net/Alexandr_T/c7akqwjr/

icons.svg#facebook
Этот файл является спрайтом, в котором лежат иконки, каждая из которых обернута скорее всего в тег <symbol id="facebook"> .... </symbol>
Для каждой иконки свой уникальный идентификатор. Тег symbol скрывает все, что лежит внутри, также как и тег defs. Поэтому вы и не видите иконки открывая броузером файл icons.svg Иконки становятся видны, когда их вызывают с помощью use

<!-- когда спрайт находится внутри файла -->
<use xlink:href="#facebook"></use> 
<!-- когда спрайт находится вне файла -->
<use  xlink:href="/img/icons/icons.svg#facebook"></use>

Как менять стили SVG из внешней таблицы CSS можно посмотреть здесь

Совершенно верно Лев Солнцев объяснил: "Так работает use"
Если более подробно, то как только мы применяем команду

use

всё что внутри попадает в shadow DOM и внешние стили не работают, но есть способы обойти эти ограничения.
1. Так как инлайновые стили имеют более высокий приоритет, чем внешние стили, то необходимо их убрать.
Поэтому сборщики спрайтов автоматически удаляют все инлайн fill, stroke
2. Так как svg элементы внутри теневого дома не наследуют родительские свойства, необходимо заставить их это сделать

circle rect{
fill:inherit;
stroke:inherit;
}

3 .В svg файл добавить строку с указанием управляющего внешнего файла CSS

<?xml-stylesheet type="text/css" href="css/svg.css" ?>

4. В SVG классы не работают их нужно заменить на id=" ".
Ниже внешний файл svg.css добавил ещё изменение цвета при наведении курсора

#circle{ 
fill:red;
stroke:black;
stroke-width:1px;
}
#rect{ 
fill:yellowgreen;
stroke:black;
stroke-width:1px;
}
circle rect{
fill:inherit;
stroke:inherit;
}
#rect:hover { 
fill:red;
stroke-width:3px;
}
 #circle:hover{
 fill: yellowgreen;
 stroke-width:3px;
 }

Ниже файл SVG к которому применяются внешние стили. Это один из вариантов. Можете брать этот код и вставлять непосредственно в HTML - будет также работать. Можете вставить файл SVG в HTML посредством тега object. Подробнее здесь.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="css/svg.css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="120" height="55" viewBox="0 0 120 55" >
  <defs>
    <symbol id="circle"  >
      <circle   cx="25" cy="27" r="24"/>
    </symbol>
    <symbol id="rect" >
      <rect    x="60" y="2" width="48" height="48"/>
    </symbol>
  </defs>

  <use xlink:href="#circle"></use>
  <use xlink:href="#rect"></use>
  
  </svg>