Невозможно войти в FB, используя smack API

Вы можете делать то, что хотите, с одним (важным) предупреждением: пути внутри вашего символа не могут быть созданы независимо через внешний CSS - вы можете только установить свойства для всего символа с помощью этого метода. Итак, если у вас есть два пути в вашем символе и хотите, чтобы у них были разные цвета заливки, это не сработает, но если вы хотите, чтобы все ваши пути были одинаковыми, это должно работать.

В вашем html, вы хотите что-то вроде этого:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

И во внешнем SVG-файле вы хотите что-то вроде этого:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

Поменяйте класс на теге svg (в вашем html) с fill-red до fill-blue и ta-da ... у вас есть синий, а не красный.

Вы можете частично преодолеть ограничение возможности таргетинга на пути отдельно с помощью внешний CSS путем смешивания и сопоставления внешнего CSS с некоторым встроенным CSS на определенных путях, поскольку встроенный CSS будет иметь приоритет. Такой подход будет работать, если вы делаете что-то вроде белого значка на цветном фоне, где вы хотите изменить цвет фона через внешний CSS, но сам значок всегда белый (или наоборот). Итак, с тем же HTML, что и раньше, и что-то вроде этого кода svg, вы получите красный фон и белый путь переднего плана:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>