gpt4 book ai didi

javascript - 将 FontAwesome 图标显示为 svg

转载 作者:行者123 更新时间:2023-11-29 15:22:56 24 4
gpt4 key购买 nike

我没有使用 SVG 的经验,所以需要一些帮助。我使用 SVG 元素,但路径周围的区域非常大。 如何使 svg 区域和路径区域几乎相同。我尝试删除高度,但这并没有解决问题。
这是 chome inspector 中的屏幕截图:svg 的大小为 64px X 128px,但路径的大小约为 22px X 37px enter image description here enter image description here附言:实际上我希望图标的大小就像我使用 fontawesome pack 一样:
enter image description here

我不想在 React 中使用 Fontawesome CDN。所以我用了 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>

最佳答案

更改您的 viewBox坐标

更新 根据 OP 的评论回答:

viewbox属性有 4 个坐标,它们是 min-x , min-y , width , height .

所以当使用 22 150 400 725 时,你是说你想开始你的 viewbox22,150400宽和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>

关于javascript - 将 FontAwesome 图标显示为 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42158476/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com