Как прикрепить Vue объект к блоку с svg икнокой?

Question

[Александр Арбузов]

Есть блок с внедренной svg иконкой (ссылка с картинкой)
Мне надо прикрепить у нему Vue объект, но Vue ругается на наличие тегов

Answer 1

[Олег]

<a id="authPopupLink" rel="nofollow" itle="Мой кабинет" class="personal-link dark-color animate-load" data-param-type="auth" data-event="jqm" data-param-backurl="/auth/index.php" data-name="auth" href="/personal/">
  <i class="svg inline svg-inline-cabinet" aria-hidden="true" title="Мой кабинет">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"> 
      <defs> 
        <svg:style> .loccls-1 { fill: #222; fill-rule: evenodd; } </svg:style>
      </defs> 
      <path class="loccls-1" d="M14,17H2a2,2,0,0,1-2-2V8A2,2,0,0,1,2,6H3V4A4,4,0,0,1,7,0H9a4,4,0,0,1,4,4V6h1a2,2,0,0,1,2,2v7A2,2,0,0,1,14,17ZM11,4A2,2,0,0,0,9,2H7A2,2,0,0,0,5,4V6h6V4Zm3,4H2v7H14V8ZM8,9a1,1,0,0,1,1,1v2a1,1,0,0,1-2,0V10A1,1,0,0,1,8,9Z"></path>
    </svg>
  </i>
  <span class="wrap">
    <span class="name">Войти</span>
  </span>
</a>

Comments

[Александр Арбузов]

Спасибо большое. Я уже думал на jquery все переписывать.

Answer 2

[Владимир Проскурин]

Скидывайте ошибки. Vue отлично работает с svg https://jsfiddle.net/sgt54bzn/ но svg должен быть внедрен на страницу, а не удаленно (через img или use).

Comments

[Александр Арбузов]

[Vue warn]: Error compiling template: 
<a id="authPopupLink" rel="nofollow" itle="Мой кабинет" class="personal-link dark-color animate-load" data-param-type="auth" data-event="jqm" data-param-backurl="/auth/index.php" data-name="auth" href="/personal/">
	<i class="svg inline svg-inline-cabinet" aria-hidden="true" title="Мой кабинет">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"> 
			<defs> 
				<style> .loccls-1 { fill: #222; fill-rule: evenodd; } </style>
			</defs> 
			<path class="loccls-1" d="M14,17H2a2,2,0,0,1-2-2V8A2,2,0,0,1,2,6H3V4A4,4,0,0,1,7,0H9a4,4,0,0,1,4,4V6h1a2,2,0,0,1,2,2v7A2,2,0,0,1,14,17ZM11,4A2,2,0,0,0,9,2H7A2,2,0,0,0,5,4V6h6V4Zm3,4H2v7H14V8ZM8,9a1,1,0,0,1,1,1v2a1,1,0,0,1-2,0V10A1,1,0,0,1,8,9Z"></path>
		</svg>
	</i>
	<span class="wrap">
		<span class="name">Войти</span>
	</span>
</a>
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed. (found in <Root>)

[Владимир Проскурин]

Александр Арбузов, вы даже не прочитали, что в ошибке написано. Там написано, что не определяйте стили в шаблонах. т.е. вынесите style из шаблонов.

[Александр Арбузов]

Владимир Проскурин, Я прочитал про что там написано и и именно про это был мой вопрос. Эти стили вшиты внутри svg. Я конечно могу вынести у конкретно этой иконки, но я же не знаю какие ещё иконку могут появиться. Хочется универсального решения. Его ниже дал камрад Олег .
P.S. перечитал вопрос - действительно не полностью расписал суть проблемы. Был не прав.