0

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

npm install @react-icons/all-files --save

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

npm install react-icons --save

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

在我的网站上的例子

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"
4

2 回答 2

2

从我能够得出的结论来看，两者都没有区别，因此性能应该没有区别。

反应图标：

  • 版本：v4.1.0
  • 两个月前发表
  • 命令：npm i react-icons

@react-icons/所有文件

  • 版本：v4.1.0
  • 两个月前发表
  • 命令：npm i @react-icons/all-files

两者都引用相同的 Github repo，并且在repo 包中引用文件 package.json 是相同的：

包.json：

{
  "name": "@react-icons/all-files",
  "version": "4.1.1-snapshot.0",
  "description": "SVG React icons of popular icon packs using ES6 imports",
  "author": "Goran Gajic",
  "contributors": [
    "kamijin_fanta <kamijin@live.jp>"
  ],
  "license": "MIT",
  "main": "lib",
  "types": "./lib/esm/index.d.ts",
  "sideEffects": false,
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com:react-icons/react-icons.git"
  },
  "bugs": {
    "url": "https://github.com/react-icons/react-icons/issues"
  },
  "homepage": "https://github.com/react-icons/react-icons#readme",
  "peerDependencies": {
    "react": "*"
  }
}

但是当引用文档时，应该使用某些状态：

对于标准的现代项目：

npm install react-icons --save

对于meteorjs、gatsbyjs等：

如果您的项目规模扩大，则此选项可用。这种方法的代价是安装软件包需要很长时间。适用于 MeteorJS、Gatsbyjs 等。

npm install @react-icons/all-files --save

当涉及到命令时：

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

这是参考font-awesome的图书馆。如果您在 node_modules 中引用已安装的目录，则所有图标包都位于两个字符目录中：

ai
bi
bs
cg
di
fa
etc.
etc.

如果您想引用任何其他图标，您只需附加两位数字符集，例如：

import { IconName } from "react-icons/gr";

索环图标

于 2021-01-11T22:32:34.680 回答
1

简而言之，@react-icons/all-files它旨在与 webpack 以外的捆绑程序一起使用。

故事比这更深入。@react-icons/all-files维护者提到并声明可能有一个很好的理由：

如果您的项目规模扩大，则此选项可用。

从以下导入存在一定的性能问题react-icons/**：所有图标都在构建时捆绑，即使您正在挑选单个图标：

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

这个问题似乎是特定于 webpack 的。人们设计了不同的解决方案，包括：

import { MdPublic } from 'react-icons/md/index.mjs';

webpack: config => {
    config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];

import FaFacebookSquare from 'react-icons/lib/fa/facebook-square';
import FaLinkedin from 'react-icons/lib/fa/linkedin';
import FaTwitter from 'react-icons/lib/fa/twitter';
import FaPinterest from 'react-icons/lib/fa/pinterest-square';
import FaInstagram from 'react-icons/lib/fa/instagram';

最近的解决方案提到 using @react-icons/all-files/**，可能与单个图标导入结合使用：

import { GrRotateLeft } from '@react-icons/all-files/gr/GrRotateLeft'
import { GrRotateRight } from '@react-icons/all-files/gr/GrRotateRight'

您还可以使用babel-plugin-import和创建一个可挑选的@react-icons插件：

import {FaBeer, FcApprove} from "@react-icons";

总而言之，除非你使用 webpack，仔细检查你的包大小，并真正从构建中挤出所有的汁液，否则你使用什么可能并不重要。

于 2021-11-11T00:35:03.890 回答