Выровнять изображение SVG по кнопке VMware Clarity - PullRequest
Новая
       14

Выровнять изображение SVG по кнопке VMware Clarity

0 голосов
/ 14 июля 2020

Я играю со спрайтами tabler svg icon и хотел бы использовать их в моем приложении angular, которое использует VMware Clarity Design .

I иметь рендеринг изображений внутри моей кнопки с использованием файла спрайта, но изображение не выравнивается с текстом: 

<button type="button" class="btn btn-icon btn-outline btn-outline-primary">
  <svg width="24" height="24">
    <use xlink:href="assets/tabler/tabler-sprite.svg#tabler-anchor"></use>
  </svg>
  Test Tabler
</button>

Я пробовал стили вертикального выравнивания на кнопке и svg без эффекта. Googling svg centering показывает МНОГО примеров отступов, но я не нашел того, который работает для меня.

1 Ответ

0 голосов
/ 14 июля 2020

У меня был неуместный тег класса в теге «use» вместо «svg» (не показан в моем исходном сообщении). Исправленный / рабочий код ниже:

style: 

.tabler {
  display: inline-block;
  vertical-align: middle;
}

html: 

<button type="button" class="btn btn-icon btn-outline btn-outline-primary">
  <svg width="24" height="24" viewBox="0 0 24 24" class="tabler">
    <use xlink:href="assets/tabler/tabler-sprite.svg#tabler-anchor"></use>
  </svg>
  Test Tabler
</button>

Теперь моя цель - вертикальное центрирование svg на моей кнопке. с ясностью.

...