Дисплей FontAwesome значки как svg

У меня нет опыта использования SVG, поэтому вам нужна помощь. Я использую элемент SVG, но область вокруг пути очень велика. Как создать область svg и область пути почти то же самое. Я попытался удалить высоту, но это не решило проблему.
Вот скриншоты в темэ инспектора: Размер SVG является 64px X 128px, но размер пути составляет около 22px X 37px PS: На самом деле я хочу, чтобы значок, чтобы иметь такие размеры, как если бы я использую fontawesome пакет :
Дисплей FontAwesome значки как svg

Я не хочу использовать Fontawesome CDN in React. Поэтому я использовал https://icomoon.io/app и выбраны отдельные элементы и хотите добавить его на страницу, как в этой статье: Icons as React Components

Вот пример элемента:

<svg width="4em" height="8em" viewBox="0 0 1000 1000"> 
 
    
 
    <path d="M265.143 804.571c0-25.143-20.571-45.714-45.714-45.714s-45.714 20.571-45.714 45.714 20.571 45.714 45.714 45.714 45.714-20.571 45.714-45.714zM384 713.143v-402.286c0-9.714-8.571-18.286-18.286-18.286h-292.571c-9.714 0-18.286 8.571-18.286 18.286v402.286c0 9.714 8.571 18.286 18.286 18.286h292.571c9.714 0 18.286-8.571 18.286-18.286zM274.286 228.571c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143s4 9.143 9.143 9.143h91.429c5.143 0 9.143-4 9.143-9.143zM438.857 219.429v585.143c0 40-33.143 73.143-73.143 73.143h-292.571c-40 0-73.143-33.143-73.143-73.143v-585.143c0-40 33.143-73.143 73.143-73.143h292.571c40 0 73.143 33.143 73.143 73.143z" 
 
    fill="grey" />  
 
</svg>

источник

2017-02-10 Taras Yaremkiv

является размер часть самого фактического SVG? – DBS

Почему вы ставите его как SVG, а не как шрифт (настройка «font-size» для работы значков FA) – Justinas

@ Justinas Я хотел использовать значки как компоненты React Components –

изменить ваши viewBox координаты

ОБНОВЛЕНИЕ На основании комментария ФП к ответу:

Атрибут viewbox имеет 4 координаты: min-x,, width, height.

Так при использовании 22 150 400 725, вы говорите, что вы хотите начать свой viewbox в 22,150 с 400 широкими и 725 высокими.

У вас есть хорошая статья на эту here

svg { 
 
    border: red solid 
 
}

<svg width="4em" height="7.5em" viewBox="22 150 400 725"> 
 
    <path d="M265.143 804.571c0-25.143-20.571-45.714-45.714-45.714s-45.714 20.571-45.714 45.714 20.571 45.714 45.714 45.714 45.714-20.571 45.714-45.714zM384 713.143v-402.286c0-9.714-8.571-18.286-18.286-18.286h-292.571c-9.714 0-18.286 8.571-18.286 18.286v402.286c0 9.714 8.571 18.286 18.286 18.286h292.571c9.714 0 18.286-8.571 18.286-18.286zM274.286 228.571c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143s4 9.143 9.143 9.143h91.429c5.143 0 9.143-4 9.143-9.143zM438.857 219.429v585.143c0 40-33.143 73.143-73.143 73.143h-292.571c-40 0-73.143-33.143-73.143-73.143v-585.143c0-40 33.143-73.143 73.143-73.143h292.571c40 0 73.143 33.143 73.143 73.143z" 
 
    fill="grey" /> 
 
</svg>

источник

2017-02-10 12:22:49 dippas

Было бы неплохо, если бы вы правильно поняли, почему viewBox = "22 150 400 725". Может быть для других это само собой разумеется, но не для меня ( –

@TarasYaremkiv только что обновил ответ – dippas

Это действительно помогает получить правильные параметры vieBox: var pathSVG = document.getElementById ("svg1"); console.log (pathSVG. getBBox()); –

Дисплей FontAwesome значки как svg

ответ

Смежные вопросы