安装用于 React 版本 15.6.0 的图标库。

huangapple go评论78阅读模式
英文:

Installing icon library for react version 15.6.0

问题

我有一个使用React版本15.6.0的旧项目,我想安装一个新的库来使用图标。

我尝试了FontAwesomeIcons库,但似乎与这个React版本不兼容。

这是项目的package.json文件:

"dependencies": {
    "airbnb-js-shims": "^1.3.0",
    "axios": "^0.16.2",
    "babel-plugin-macros": "^3.1.0",
    "bootstrap": "^3.3.7",
    "classnames": "^2.2.5",
    "dns": "file:./src/dns",
    "glamor": "^2.20.40",
    "js-cookie": "2.1.4",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "react": "^15.6.0",
    "react-bootstrap": "^0.31.0",
    "react-bootstrap-autosuggest": "^0.5.0",
    "react-bootstrap-switch": "^15.5.0-a",
    "react-bootstrap-typeahead": "^2.0.0-alpha.3",
    "react-click-outside": "^2.3.1",
    "react-datetime": "^2.9.0",
    "react-dom": "^15.6.0",
    "react-loading-spinner": "^1.0.12",
    "react-redux": "^5.0.5",
    "react-redux-multilingual": "^1.0.4",
    "react-router-dom": "^4.1.1",
    "react-scripts": "1.0.13",
    "react-select": "^1.0.0-rc.10",
    "react-sortable": "^1.2.0",
    "react-sortable-component": "^1.0.0",
    "react-sortable-hoc": "^0.6.8",
    "react-toastify": "^4.1.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "smoothscroll-polyfill": "^0.4.0"
},
"devDependencies": {
    "babel-eslint": "^8.0.2",
    "babel-plugin-import": "^1.6.2",
    "babel-plugin-transform-imports": "^1.4.1",
    "eslint": "^3.19.0",
    "eslint-config-google": "^0.8.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-react": "^7.0.1",
    "react-app-rewired": "^1.3.5",
    "react-scripts": "1.0.7"
},
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build && mv build ./webagent && mkdir ./build && mv ./webagent ./build/webagent",
    "build:pre_prod": "react-app-rewired build",
    "build:prod": "react-app-rewired build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

尝试安装较旧版本和其他库,但也无法工作。

英文:

I have an old project that uses react version 15.6.0, and I want to install a new library to use icons.

I tried FontAwesomeIcons library but it seems to not be compatible with this react version.

Here is the package.jason of the project:

 "dependencies": {
"airbnb-js-shims": "^1.3.0",
"axios": "^0.16.2",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"dns": "file:./src/dns",
"glamor": "^2.20.40",
"js-cookie": "2.1.4",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"react": "^15.6.0",
"react-bootstrap": "^0.31.0",
"react-bootstrap-autosuggest": "^0.5.0",
"react-bootstrap-switch": "^15.5.0-a",
"react-bootstrap-typeahead": "^2.0.0-alpha.3",
"react-click-outside": "^2.3.1",
"react-datetime": "^2.9.0",
"react-dom": "^15.6.0",
"react-loading-spinner": "^1.0.12",
"react-redux": "^5.0.5",
"react-redux-multilingual": "^1.0.4",
"react-router-dom": "^4.1.1",
"react-scripts": "1.0.13",
"react-select": "^1.0.0-rc.10",
"react-sortable": "^1.2.0",
"react-sortable-component": "^1.0.0",
"react-sortable-hoc": "^0.6.8",
"react-toastify": "^4.1.0",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"smoothscroll-polyfill": "^0.4.0"
},
"devDependencies": {
"babel-eslint": "^8.0.2",
"babel-plugin-import": "^1.6.2",
"babel-plugin-transform-imports": "^1.4.1",
"eslint": "^3.19.0",
"eslint-config-google": "^0.8.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-react": "^7.0.1",
"react-app-rewired": "^1.3.5",
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build && mv build ./webagent && mkdir ./build && mv ./webagent ./build/webagent",
"build:pre_prod": "react-app-rewired build",
"build:prod": "react-app-rewired build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Tried installing older versions and other libraries but woudn't work either

答案1

得分: 0

React版本15.6.0相当老,发布于2017年6月8日。大多数现代图标库都是针对更新版本的React构建的,可能与这么老的React版本不兼容。

然而,仍然有一些图标库可能与React 15.6.0兼容。其中一个库是"react-icons"库。根据他们的文档,它支持React 0.14.x及更高版本,应该包括React 15.6.0。

你可以使用npm或yarn安装"react-icons"库,然后在你的React应用程序中像这样使用它:

import { FaStar } from 'react-icons/fa';

function MyComponent() {
  return (
    <div>
      <FaStar />
      <p>Star图标</p>
    </div>
  );
}

请注意,由于React 15.6.0是一个非常老的版本,你可能会在其他库和组件上遇到兼容性问题,所以如果可能的话,考虑升级到更新版本的React可能是值得的。

英文:

React version 15.6.0 is quite old and was released on June 8, 2017. Most current icon libraries are built with newer versions of React in mind and may not be compatible with such an old version of React.

However, there are still some icon libraries that may be compatible with React 15.6.0. One such library is the "react-icons" library. According to their documentation, it supports React 0.14.x and above, which should include React 15.6.0.

You can install the "react-icons" library using npm or yarn, and then use it in your React application like this:

import { FaStar } from 'react-icons/fa';

function MyComponent() {
return (
&lt;div&gt;
&lt;FaStar /&gt;
&lt;p&gt;Star icon&lt;/p&gt;
&lt;/div&gt;
);
}

Note that since React 15.6.0 is a very old version, you may run into compatibility issues with other libraries and components, so it may be worth considering upgrading to a newer version of React if possible.

huangapple
  • 本文由 发表于 2023年2月16日 19:06:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/75471362.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定