Как я могу использовать иконки SVG с тегами <svg> и <use>

У меня есть приложение Angular 1.5, которое взаимодействует с Salesforce с помощью REST API.

Salesforce требует от нас использовать значки SVG со следующим синтаксисом:

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>

В Salesforce работает хорошо.

Я пытаюсь использовать локально для разработки, но не работает. Я попробовал следующий код:

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
    <use xlink:href="/path/to/the/icon.svg"></use>
</svg>

В соответствии с этой документацией нам нужно добавить в элемент HTML следующий код:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Но не повезло!:(

Есть идеи использовать SVG с этими тегами и ссылаться на локальный файл?

Источник

1 ответ

Использование <img> и установите свой src ссылка на местный путь вашего .svg файл.

<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">

Больше здесь: https://css-tricks.com/using-svg/

Источник
Другие вопросы по тегам