Видна только часть иконки. Как можно исправить?

Question

[Илья]

Привет, размер для иконки должен быть 12х12, но отображается только часть

<address class="contacts">
              <span class="contacts__desc">Москва, ул.Новый Арбат, д.31/12</span>
              <a href="tel:[phone]" class="phone-number footer__phone-number">
                <span class="phone-number__icon">
                  <svg class="phone-number__icon-elem">
                    <use xlink:href="./img/sprite.svg#phone"></use>
                  </svg>
                </span>
                <span class="phone-number__text">8 800 903 90 90</span>
              </a>
            </address>

.phone-number__icon-elem {
  width: rem(12px);
  height: rem(12px);
  margin-right: rem(6px);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
  <symbol id="phone">
    <g clip-path="url(#clip0_2_1213)">
    <path d="M23.9481 18.5956C23.8802 18.3911 23.4483 18.0898 22.6528 17.6924C22.4372 17.5671 22.1301 17.3969 21.7328 17.181C21.335 16.965 20.974 16.7661 20.6504 16.5842C20.3261 16.4024 20.0222 16.2263 19.7384 16.0561C19.693 16.022 19.551 15.9227 19.3123 15.7576C19.0735 15.5929 18.872 15.4707 18.707 15.391C18.5422 15.3118 18.3802 15.2719 18.2211 15.2719C17.9939 15.2719 17.7101 15.4339 17.3693 15.7576C17.0285 16.0816 16.7159 16.4336 16.432 16.8147C16.148 17.1955 15.8468 17.5475 15.5289 17.8714C15.2106 18.1954 14.949 18.3572 14.7447 18.3572C14.6422 18.3572 14.5143 18.3286 14.361 18.2722C14.2078 18.2154 14.0913 18.1668 14.0113 18.1276C13.932 18.0875 13.7959 18.0082 13.6026 17.8885C13.409 17.7692 13.3013 17.7038 13.2786 17.6924C11.7218 16.8286 10.3867 15.8399 9.273 14.7266C8.15962 13.6127 7.17084 12.2777 6.30725 10.7208C6.29591 10.6981 6.23042 10.5901 6.11119 10.397C5.99179 10.2038 5.91221 10.0676 5.87245 9.98781C5.83268 9.90835 5.78439 9.79181 5.72767 9.63844C5.67095 9.48506 5.64248 9.3573 5.64248 9.25491C5.64248 9.05049 5.80445 8.789 6.12833 8.47079C6.45215 8.15276 6.80451 7.8515 7.18505 7.56762C7.56589 7.28374 7.91789 6.97114 8.24183 6.63036C8.56565 6.2894 8.72756 6.00546 8.72756 5.77824C8.72756 5.61925 8.6878 5.45716 8.60834 5.29244C8.52882 5.12737 8.40667 4.92594 8.24183 4.68719C8.07693 4.44856 7.97753 4.30665 7.94338 4.26098C7.77311 3.97709 7.59717 3.67315 7.41514 3.34927C7.23311 3.02545 7.03442 2.66449 6.81842 2.26682C6.6026 1.86932 6.43227 1.5624 6.30713 1.34651C5.90964 0.551227 5.60856 0.119224 5.40397 0.0512838C5.32438 0.0171941 5.20498 0 5.04605 0C4.73907 0 4.33859 0.0567167 3.84432 0.170508C3.34987 0.284121 2.96079 0.403286 2.67667 0.52848C2.10849 0.766989 1.50628 1.46013 0.869857 2.60766C0.290332 3.6756 0.000598907 4.73262 0.000598907 5.77794C0.000598907 6.08451 0.0204796 6.38278 0.060241 6.67281C0.100002 6.96254 0.171047 7.28929 0.273436 7.65299C0.375645 8.01658 0.458093 8.28667 0.520422 8.46255C0.58281 8.63855 0.699289 8.95384 0.869797 9.40852C1.04007 9.86309 1.14245 10.1414 1.17654 10.2436C1.57422 11.3573 2.0458 12.3515 2.59118 13.2266C3.4885 14.681 4.71304 16.1841 6.26409 17.7353C7.8152 19.2864 9.31802 20.5108 10.7726 21.4085C11.6475 21.9538 12.6421 22.4254 13.7556 22.8233C13.8579 22.8573 14.1362 22.9594 14.5906 23.1303C15.0451 23.3007 15.3605 23.4171 15.5365 23.4796C15.7126 23.5422 15.9828 23.6247 16.346 23.7271C16.7101 23.8295 17.0366 23.9005 17.3263 23.9406C17.6162 23.9798 17.9145 24.0001 18.2212 24.0001C19.2664 24.0001 20.3235 23.7101 21.3916 23.1307C22.539 22.4945 23.232 21.8922 23.4706 21.3236C23.5961 21.0397 23.715 20.6506 23.8286 20.1561C23.9426 19.6619 23.9992 19.2615 23.9992 18.9545C23.9995 18.795 23.9824 18.6759 23.9481 18.5956Z"/>
    </g>
    <defs>
    <clipPath id="clip0_2_1213">
    <rect width="24" height="24" fill="white"/>
    </clipPath>
    </defs>
  </symbol>
</svg>

Comments

[modelair]

это у вас что еще такое?

.phone-number__icon-elem {
  width: rem(12px);
  height: rem(12px);
  margin-right: rem(6px);
}

[Илья]

modelair, стили для иконки

[modelair]

Илья, на сss не похоже

[modelair]

Илья, сделайте codepen

[Илья]

это scss

[Илья]

modelair,

.phone-number__icon-elem {
  width: 0.6666666667rem;
  height: 0.6666666667rem;
  margin-right: 0.3333333333rem;
}

[modelair]

Илья, да это понятно, я так-то знаю что такое scss. просто конструкции такие непривычно видеть.
вы сделайте демку

[Ankhena]

modelair,

просто конструкции такие непривычно видеть.

Обычный миксин для перевода в rem.

Илья, в спрайте потерян viewbox. Вернете всё заработает.

p.s. сейчас удобнее использовать стеки, т.е. спрайты состоящие из svg, а не из symbol.
Плюс в том, что можно использовать
- в use
- в img
- как background
- как mask (идеальный вариант для меняющих цвет иконок на данный момент)
- как content в псевдо (неудобный вариант, плохо контролируемые размеры)

Используя 3 или 4 вариант, вы получите чистенькую разметку:

<a href="tel:[phone]" class="phone-number footer__phone-number">
    <span class="phone-number__text">8 800 903 90 90</span>
</a>

В номерах телефонов нет переносов и если нет необходимости выделять какие-то части, то и этот span можно убрать. Но для единообразия можно и оставить.

[modelair]

Ankhena, обычный, но его редко встретишь где-бы то ни было

[Ankhena]

modelair, редкость зависит от вашего окружения (в том числе и виртуального, как например, Тостер). Делает оно так или нет. Т.е. субъективная оценка.
Достаточно найти тему сторонников верстки в rem и редко превратится в часто :)

[modelair]

Ankhena, это вы слишком по-капитански. :)

[Ankhena]

modelair, я хотела лаконично, если восприняли как резко, прошу прощения.

[modelair]

Ankhena, спасибо, все в порядке. я только улыбался.

[Илья]

Ankhena, Вы правы по поводу vievBox, но у меня внутри тэга svg лежат 5 symbol и vievBox был прописан в svg, и при этом я мог редактировать размеры у всех кроме конкретной иконки
т.е лучше vievBox прописывать в каждом symbol?
Спасибо

[Ankhena]

Илья,

т.е лучше vievBox прописывать в каждом symbol?

да, именно так.

Как лучше чтобы прям совсем хорошо, я писала в первом комментарии
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
https://demos.frontend-design.ru/sprite/src/

[Илья]

Ankhena, это будет следующим шагом)
Еще раз спасибо!

[Илья]

Ankhena, можно прямо тут задать вопрос по поводу stack.svg или лучше создать отдельный вопрос?

[Ankhena]

Илья, заметно быстрее всегда сразу спрашивать.

[Ankhena]

Илья, вот видите, прошло 3 часа с момента как вы написали, а даже не появилось самого вопроса.
А могли уже 2 часа назад получить ответ или направление куда думать.

[Илья]

Ankhena, к сожалению я только утром могу заниматься обучением.
вопрос про тэг style в тэге svg
конкретнее про

<style> :root svg:not(:target) { display: none } </style>

я не смог разобраться со sprite.svg (https://qna.habr.com/q/1293108) и решил перейти по Вашему совету к stack.svg

[Ankhena]

Илья, тяжелый случай.
Ладно, через пару дней, глядишь и вопрос будет.

[Илья]

Ankhena, если Вы подскажите как действовать в такой ситуации, то буду очень благодарен

[Ankhena]

Илья, в какой ситуации?
Вы показали кусок стилей из спрайта. Что с ними не так, не написали.
Если у вас внешний спрайт, то можно удалить эту строку. Можно оставить и не обращать внимания.

[Ankhena]

Илья, я думаю, что для прояснения вам нужно почитать css.yoksel.ru/svg-sizes/#viewBox

Answer 1

[sergski]

Задайте размеры контейнеру phone-number__icon, а для svg установите 100x100%, те

phone-number__icon {
  width: rem(12px);
  height: rem(12px);
  margin-right: rem(6px);}

.phone-number__icon-elem {
width: 100%; 
height: 100%;}

и какой у вас у спрайта для телефона viewBox?