标签: react-icons

我想弄清楚如何设计我使用react-icons.

特别是，我希望能够创建与此类似的外观：

也就是说，我想添加背景颜色、填充、边框半径等。但是，我找不到一种简单的方法来做到这一点。

我可以添加一个大小和颜色道具，这将改变图标的​​实际大小和颜色。但是我没有简单的方法来改变其他元素。

有谁知道我该怎么做（或者他们可以推荐一个可以帮助我解决这个问题的不同图书馆）？

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

问：你能不能只显示一个图标的一半，然后以某种方式知道用户是点击一侧还是另一侧？

这是我目前使用半星的代码作为参考

import React, { useState } from 'react'
import { FaRegStarHalf, FaStarHalf } from 'react-icons/fa'

import './styles/Rater.css'

const Rater = ({ iconCount }) => {
    const [rating, setRating] = useState(null)
    const [hover, setHover] = useState(null)
    // check if user has set a rating by clicking a star and use rating to determine icons
    const Star = rating ? FaStarHalf : …

注意：您可以在此处下载整个项目。它基本上是一个遵循JSMastery的 YouTube 教程的练习项目。

症状

1. chrome浏览器崩溃了
2. 在 Microsoft Edge 中也出现这样的崩溃。
3. 我在 chrome 中使用了另一个配置文件，结果是一样的。
4. 没有明显的编译错误。
5. 放假前还好好的，放假期间就没启动过一次，回来就失败了。
6. 它在 Firefox 浏览器中也崩溃了。

顺便说一句，chrome 是最新的：

此问题的可能原因：

1. 我在系统驱动器中安装了英雄联盟（我知道这并不重要，但以防万一）
2. 我把我的nodeJS从F盘重新安装到了C盘，也就是系统盘。我这样做是因为当我今天第一次启动 ReactApp 时，它甚至无法使用 npm，因为它找不到“主”条目。（我不明白这个错误，所以我重新安装了它。）
3. BIOS 系统开始警告我，我的硬盘出现故障，要求我在每次重新启动计算机时按 f1 来恢复。

我在 VS Code 中运行了我的应用程序，VS Code 中的控制台如下所示：

我在我的网站中使用 React Icons，我注意到该包相当大 - 在开发人员工具的网络选项卡中几乎有 9MB（这使得网站在慢速互联网上加载需要很长时间）。然而，我最多只使用几个图标。以下是我目前在代码中导入图标的方式：

import { AiFillCloseCircle, AiOutlineMenu } from 'react-icons/ai';

我尝试在网上寻找解决方案，但我找不到任何关于如何在仅使用几个图标时减少 React Icons 文件大小的明确答案。

任何人都可以建议以更有效的方式使用 React Icons 的解决方案或最佳实践吗？我想在不影响功能的情况下尽可能减小包的大小。

提前致谢！

我想使用线性渐变动态地部分填充来自React-icons的Font Awesome Star。我尝试了以下方法：

使用内联样式的React Component-将父跨度的背景设置为渐变并使SVG透明。似乎无法将SVG星形周围的边框设置为#FFFFFF，因此我看到了父跨度的整个背景。见下文：

import React from 'react'
import FaStar from 'react-icons/lib/fa/star'

const Stars = () => {

  const inlineStyle = (pctFill) => {
    return(
      {background: 'linear-gradient(90deg, #134758 '+pctFill+'%, #d3d3d3 '+pctFill+'%)'}
    )
  }

  return(
    <div>
      <span style={inlineStyle(50)}>
        <FaStar />
      </span>
    </div>
  )
}

export default Stars

我也尝试过创建linearGradient组件并设置路径的fill =“ url（#component）”，但是react-icons路径是我父级span的第三个子级，我不知道该如何访问。

请帮忙

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

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

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

import React, { useState } from 'react';
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(!hover)
  }

  return (
    <div onMouseEnter={onHover} onMouseLeave={onHover} role="button" tabIndex='-3' >
      { hover ? "SKILLS" : <SkillsButton /> }
    </div>
  )
}

export default SkillsBtn;

对于造型我有

import styled from 'styled-components';
import { …

我已经使用 npm 正确安装了 React-icons 模块，并且一切正常。我可以毫无错误地导入图标，但遗憾的是每当我尝试在它Io之前导入图标时

import { IoSettingsOutline } from 'react-icons/io'
class Home extends Component{
    render(){
        return (
            <div className="app">
                <Link to='/settings'>
                <IoSettingsOutline className="settings-icon"/>
                </Link>
            </div>
       )
    }
};

如何使移动设备上的反应图标图标尺寸更小？我知道像素不是一个好方法，但我应该怎么做？

import { FaSearch, FaFacebook, FaInstagram, FaUserCog, FaUserTimes } from "react-icons/fa";

    <FaSearch
        color="#023373"
        size="30px" />

    # npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@2.1.3, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack …

我想动态导入反应图标。

这在 Javascript 中有效，但是我如何将其转换为 Typescript 而不会出现各种错误？

代码：

import * as ReactIcons from 'react-icons/all';
const getIcon = (icon) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

如果有帮助的话，这是来自react-icons的.d.ts文件的输出：

// node_modules/react-icons/all.d.ts
export * from './fa';
export * from './fa';
export * from './io';
export * from './md';
export * from './ti';
export * from './go';
export * from './fi';
export * from './gi';
export * from './gi';
export * from './gi';