问题标签 [react-icons]

如何将图标对齐到与文本相同的级别。截至目前，我看到该图标位于文本的顶部。我尝试使用padding-top: 5pxand ，margin-top: 5px但这似乎没有按预期工作。

我使用Stackblitz创建了一个工作示例。有人可以帮忙吗？

我有一个侧边栏组件，其列表项是在地图函数内部生成的（从 api 获取的电影流派）。我想在每种电影类型旁边都有一个不同的图标，但一直无法找到一种方法来为每次运行地图功能创建不同的图标。

我的想法是第一个：按照我希望它们显示的顺序制作一组我想显示的图标。

然后在我的地图功能中为每个列表项生成一个不同的图标

是否可以务实地创建这样的组件？如果我想要不同的图标，我可以避免单独创建每个列表项。

我正在使用 react-icons 和 Font Awesome 图标，我设法通过 2 种方法轻松更改颜色：

与颜色道具一起使用：

与 css 一起使用：

现在，使用 Grommet 图标似乎没有任何效果，图标总是黑色的

因此，当您将鼠标悬停在鼠标上时，我试图显示文本。我正在使用 React-Icons 库并使用 Styled-Components 进行样式设置

我的导航栏上有 4 个图标 - 主页 - 关于 - 技能 - 工作

每个按钮都是它自己的组件，以便悬停正常工作，所以当我将鼠标悬停在 1 个图标上时，它不会显示所有按钮的文本

对于造型我有

我确实实现了悬停效果，但是当我不断悬停图标时，逻辑似乎变得混乱 bc 然后它只有出现的文本，当我将鼠标悬停在文本上时，图标出现......这不是想要的效果

示例：https ://gph.is/g/4ARQoRV

我有下面的图标如下

我在 JSON 文件中也有相同的名称（GandalfIcon、TreasureMapIcon...）。我想要做的是当我从 JSON 中获取字符串“GandalfIcon”时，我想在页面上显示实际的 GandalfIcon。我正在使用 map() 所以我想我不能对它们进行硬编码，并且使用 {} 不起作用。有什么建议么？

所以澄清一下，这不起作用：

他们说安装（对于meteorjs，gatsbyjs等）是

安装（用于标准现代项目）

两种安装有什么区别，我使用的是安装（对于标准的现代项目），我应该使用另一个安装，因为我的 gatsby 网站太大了，如果那样的话，我如何在安装中导入图标（对于meteorjs，gatsbyjs， ETC）。

在我的网站上的例子

目前在网站上使用 react-icons 并且在 svg 和样式方面遇到问题。

到目前为止，我尝试的是使用{IconContext.Provider}git repo 上显示的 React-Icons 以及使用fill, stroke。我还尝试使用上下文提供程序添加一个 CSS 类，然后在模块中使用 CSS 属性设置 svg 的背景颜色，但这似乎也不起作用。

设置 SVG 背景颜色的最简单方法是什么？

使用中风和填充它只会为实际图标本身着色，因为那是正在绘制的矢量。

Icon正在作为道具传递给StyledCard.

我正在构建一个评级组件，它接收许多图标并使用react-icons. 然而，我的问题是关于我想要实现的功能。目前，我使用的反应图标FaStarhalf是一个预填充的半星，我翻转它以制造我创造了半星的错觉。这很容易使用并且可以完成我需要它做的事情，但是，我想实现一种更好的方式来在您选择星星时进行显示。不幸react-icons的是，我似乎没有能力一路填充图标。FaRegStarHalf是另一个组件，react-icons它基本上是从星星上剪下来的，但是，你不能填充它。

所以我问你的问题。是否有可能在我的FaStarHalf组件内部，当它被点击时，将每一个更改FaStarHalf为它的填充对应物react-icons？我可以将组件从自身内部更改为不同的组件吗？

Rater

我目前有一个评分系统，可以产生 5 颗星，可以显示一半的值。我通过使用 FontAwesome 的半星来做到这一点，并做了一些 CSS 技巧让它们看起来像一颗星。但是我想通过想出一种只显示一半 SVG 图标的方法来增加我的 React 和 CSS 知识。因此，我可以使用用户想要的任何图标，而不是使用半星，例如，如果您想给出 3.5 分，它只会显示 50% 的图标。

问：您能否只显示图标的一半并以某种方式知道用户是单击一侧还是另一侧？

这是我目前使用的代码，它使用 HalfStars 作为参考

我的 React/TypeScript 应用程序中有一个 Upvote 组件，允许用户对帖子进行投票，或删除他们的投票。upvote 本身是react-icons包中的一个图标，特别是来自 Grommet-Icons 部分。当用户通过单击图标对帖子进行投票时，我会动态更改图标的填充，如下所示：

e.target是一个 SVG 元素。在那个元素中，我querySelector用来找到它的path子元素。在path孩子身上，我将其“填充”属性设置为绿色。

这工作正常，但我想扩展它。当我呈现每个帖子时，我会检查登录的用户是否已经投票支持该特定帖子。我想根据用户是否已经对帖子进行投票的布尔结果来更改图标的颜色，这样图标就可以是绿色的，并且用户会看到他们已经对帖子进行了投票。我的问题是如何在没有 - 的情况下访问该“填充”属性，e.target因为用户在页面加载时没有点击任何内容。我想我的问题非常具体到react-icons包的使用，因为当我向我的返回函数添加一个图标时，它被一个包装组件包装，所以我无法访问该path元素（在这种情况下，组件是GrSign）。

这是上下文的 Upvote 组件：

在useEffect函数中，我想添加一条线来改变图标的​​颜色 if upvoted === true。

以防万一这有帮助，这是我console.log(e.target)在函数内部编写时打印到控制台的内容handleClick：