将FontAwesome图标显示为svg
[英]Display FontAwesome icons as svg
问题描述
I have no experience in using SVG, so need some help. 
我没有使用SVG的经验，所以需要一些帮助。 I use an SVG element but the area around path is very large. 我使用SVG元素，但路径周围的区域非常大。 How do I make an svg area and path area almost the same . 如何使svg区域和路径区域几乎相同 。 I tried to remove height but that doesn't solve the problem. 我试图去除高度，但这并没有解决问题。
Here's the screenshots in chome inspector: The size of svg is 64px X 128px, but size of path is around 22px X 37px 这是chome督察的截图：svg的大小是64px X 128px，但路径大小约为22px X 37px
PS: Actually I want the icon to have such sizes as if I use fontawesome pack:
PS：其实我希望图标有这样的尺寸，好像我使用fontawesome包：
I dont want to use Fontawesome CDN in React. 我不想在React中使用Fontawesome CDN。 So I used https://icomoon.io/app and selected separate elements and want to add it to the page as in this article : Icons as React Components 所以我使用了https://icomoon.io/app并选择了单独的元素，并希望将它添加到页面中，如本文所示： 作为React组件的图标
Here's an example of element: 这是元素的一个例子：
<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>
1 个解决方案
解决方案1
1 已采纳 2017-02-10 12:22:49
change your viewBox coordinates 更改viewBox坐标
UPDATE Based on OP's comment to answer: 更新根据OP的评论回答：
The viewbox attribute has 4 coordinates, they are min-x , min-y , width , height . viewbox属性有4个坐标，它们是min-x ， min-y ， width ， height 。
So when using 22 150 400 725 , you are saying that you want to start your viewbox at 22,150 with 400 wide and 725 high. 因此，当使用22 150 400 725 ，您说要在22,150开始查看viewbox ， 400宽和725高。
You have a good article on this 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.