如何在 React 中替换 Glyphicon 标签

Question

我已将 bootstrap 从 v3.X.x 更新为 v4.x.x 并作出反应-bootstrap 到 0.32.X 到 1.4.0，现在我遇到了 Glyphicon 标签的问题。

根据 bootstrap 文档 Glyphicon 已从最新的 bootstrap 中删除，可以用 react-icons、fontawesome 等替换

我已经完成 link 并在我的应用程序中集成了 glyphicon css。

我面临的问题是<Glyphicon>,，因为我是新手，谁能告诉我这个标签的替代方案。

这就是我的代码的样子

import * as React from 'react';
import { Glyphicon } from 'react-bootstrap';

<Glyphicon glyph="remove" onClick={(e) => { onRemove() }} />

Answer 1

已替换

<Glyphicon glyph="remove" onClick={(e) => { onRemove() }} />

使用以下代码

<button
            type="button"
            className="btn-white btn-xs"
            onClick={(e: any) => { onRemove() }}
        ><i className='text-danger glyphicon glyphicon-remove'></i></button>

我们也可以使用 font awesome 图标代替 glyphicon glyphicon-remove

Answer 2

Font-awesome 5 在 https://fontawesome.com/how-to-use/on-the-web/using-with/react and font-awesome 4 has an unofficial react package https://www.npmjs.com/package/react-fontawesome

有一个官方的 React 包你可以使用

根据您现在使用的内容，从两者中选择其一。如果您想尽量减少代码更改，您还可以创建一个过渡库，例如制作一个像 GlyphiconToFa.js:

这样的文件

const mapping = {
    remove: 'times'
}
export const Glyphicon = (props) => {
   const { glyph, ...faProps } = props;
   // Map the rest of the glyphicon properties to font-awesome properties
   return (
       <FontAwesome icon={mapping[glyph]} ...faProps />
   );
}

现在使用它，您只需要将导入从 import { Glyphicon } from 'react-bootstrap'; 交换到 import { Glyphicon } from './GlyphiconToFa.js'，无论它在哪里使用（当然要调整路径）。

这应该减少仅导入所需的代码更改

如何在 React 中替换 Glyphicon 标签

How to replace Glyphicon tag in react

reactjs

react-bootstrap

bootstrap-4