将FontAwesome图标显示为svg

Question

我没有使用SVG的经验，所以需要一些帮助。 我使用SVG元素，但路径周围的区域非常大。 如何使svg区域和路径区域几乎相同。 我试图去除高度，但这并没有解决问题 这是chome督察的截图： svg的大小是64px X 128px，但路径大小约为22px X 37px P.S： 实际上我希望图标有这样的尺寸，好像我使用fontawesome pack：

我不想在React中使用Fontawesome CDN。因此，我使用https://icomoon.io/app并选择了单独的元素，并希望将其添加到页面中，如本文所述：Icons as React Components

这是元素的一个例子：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更改viewBox坐标

更新根据OP的评论回答：

viewbox属性有4个坐标，分别是min-x，min-y，width，height。

因此，在使用22 150 400 725时，您要说的是viewbox 22,150 400 725宽svg { border: red solid }高。

你有一篇关于这个here

的好文章

＆＃13;

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;