This page is being translated; the original is shown (Русский ).
Размер SVG-изображений
Классы svg-* задают ширину и высоту элемента по шкале размеров текста:
svg-3 совпадает с размером шрифта text-3. Берите их для значков SVG, чтобы
значок был одного размера с текстом рядом.
Пример
Шкала
Ступени от svg-1/4 до svg-12.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap items-end gap-4" >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-1/4 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-1/4</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-1/3 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-1/3</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-1/2 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-1/2</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-1 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-1</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-2 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-2</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-3 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-3</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-4 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-4</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-5 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-5</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-6 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-6</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-7 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-7</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-8 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-8</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-9 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-9</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-10 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-10</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-11 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-11</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="svg-12 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-12</code >
</div >
</div >
Рядом с текстом
Значок и текст одной ступени шкалы одного размера.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-2" >
<div class ="flex items-center gap-1 text-2 color-on-surface" >
<svg class ="svg-2 fill-current" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<span >Текст <code >text-2</code > и значок <code >svg-2</code ></span >
</div >
<div class ="flex items-center gap-1 text-5 color-on-surface" >
<svg class ="svg-5 fill-current" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<span >Текст <code >text-5</code > и значок <code >svg-5</code ></span >
</div >
</div >
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: значок растёт с ширины md и ещё раз с ширины xl.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-1 items-start" >
<svg class ="svg-2 md:svg-6 xl:svg-10 fill-primary" viewBox ="0 0 24 24" aria-hidden ="true" ><path d ="M12 2l3 7h7l-5.5 4.2L18.5 21 12 16.8 5.5 21l2-7.8L2 9h7z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >svg-2 md:svg-6 xl:svg-10</code >
</div >
Классы
Класс
CSS
Значения
svg-1/4width: var(--sf-text-size-1/4); height: var(--sf-text-size-1/4); line-height: var(--sf-text-height-1/4)—
svg-1/3width: var(--sf-text-size-1/3); height: var(--sf-text-size-1/3); line-height: var(--sf-text-height-1/3)—
svg-1/2width: var(--sf-text-size-1/2); height: var(--sf-text-size-1/2); line-height: var(--sf-text-height-1/2)—
svg-1width: var(--sf-text-size-1); height: var(--sf-text-size-1); line-height: var(--sf-text-height-1)—
svg-2width: var(--sf-text-size-2); height: var(--sf-text-size-2); line-height: var(--sf-text-height-2)—
svg-3width: var(--sf-text-size-3); height: var(--sf-text-size-3); line-height: var(--sf-text-height-3)—
svg-4width: var(--sf-text-size-4); height: var(--sf-text-size-4); line-height: var(--sf-text-height-4)—
svg-5width: var(--sf-text-size-5); height: var(--sf-text-size-5); line-height: var(--sf-text-height-5)—
svg-6width: var(--sf-text-size-6); height: var(--sf-text-size-6); line-height: var(--sf-text-height-6)—
svg-7width: var(--sf-text-size-7); height: var(--sf-text-size-7); line-height: var(--sf-text-height-7)—
svg-8width: var(--sf-text-size-8); height: var(--sf-text-size-8); line-height: var(--sf-text-height-8)—
svg-9width: var(--sf-text-size-9); height: var(--sf-text-size-9); line-height: var(--sf-text-height-9)—
svg-10width: var(--sf-text-size-10); height: var(--sf-text-size-10); line-height: var(--sf-text-height-10)—
svg-11width: var(--sf-text-size-11); height: var(--sf-text-size-11); line-height: var(--sf-text-height-11)—
svg-12width: var(--sf-text-size-12); height: var(--sf-text-size-12); line-height: var(--sf-text-height-12)—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:svg-1/4.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены .
Переменная
Значение по умолчанию
--sf-text-size-1/4var(--sf-text--size-1\/4)
--sf-text-height-1/4var(--sf-text--height-1\/4)
--sf-text-size-1/3var(--sf-text--size-1\/3)
--sf-text-height-1/3var(--sf-text--height-1\/3)
--sf-text-size-1/2var(--sf-text--size-1\/2)
--sf-text-height-1/2var(--sf-text--height-1\/2)
--sf-text-size-1var(--sf-text--size-1)
--sf-text-height-1var(--sf-text--height-1)
--sf-text-size-2var(--sf-text--size-2)
--sf-text-height-2var(--sf-text--height-2)
--sf-text-size-3var(--sf-text--size-3)
--sf-text-height-3var(--sf-text--height-3)
--sf-text-size-4var(--sf-text--size-4)
--sf-text-height-4var(--sf-text--height-4)
--sf-text-size-5var(--sf-text--size-5)
--sf-text-height-5var(--sf-text--height-5)
--sf-text-size-6var(--sf-text--size-6)
--sf-text-height-6var(--sf-text--height-6)
--sf-text-size-7var(--sf-text--size-7)
--sf-text-height-7var(--sf-text--height-7)
--sf-text-size-8var(--sf-text--size-8)
--sf-text-height-8var(--sf-text--height-8)
--sf-text-size-9var(--sf-text--size-9)
--sf-text-height-9var(--sf-text--height-9)
--sf-text-size-10var(--sf-text--size-10)
--sf-text-height-10var(--sf-text--height-10)
--sf-text-size-11var(--sf-text--size-11)
--sf-text-height-11var(--sf-text--height-11)
--sf-text-size-12var(--sf-text--size-12)
--sf-text-height-12var(--sf-text--height-12)
В CSS косую черту в имени экранируют: var(--sf-text-size-1\/4).
Применение
Ступени
Класс svg-{ступень} берёт ширину и высоту из токена
--sf-text-size-{ступень} — того же, что задаёт размер шрифта text-{ступень}.
Поэтому значок, подобранный по ступени текста, остаётся с ним одного размера,
когда меняется шкала текста.
HTML wrap_text Wrap source lines content_copy Copy
<span class ="flex items-center gap-1 text-2" >
<svg class ="svg-2 fill-current" viewBox ="0 0 24 24" aria-hidden ="true" >…</svg >
Избранное
</span >
Класс подходит и для <img> с файлом SVG: он задаёт размер любого элемента.
Ограничения
Класс задаёт ширину и высоту одним значением: значок с другими пропорциями
вписывается в квадрат по своему viewBox.
Класс задаёт и line-height ступени текста; на сам элемент <svg> это не
влияет.
Префиксов состояния у семейства нет.
См. также
Предыдущая Тип заливки Следующая Цвет обводки
