How to replace Glyphicon tag in react

Question

I have updated bootstrap from v3.X.x to v4.x.x and react-bootstrap to 0.32.X to 1.4.0, now I am facing issue with the Glyphicon tag.

As per bootstrap documentation Glyphicon is removed from latest bootstrap and can be replaced by react-icons, fontawesome, etc.

I have already gone through bootstrap-4-glyphicons-migration link and integrated glyphicon css in my application.

The problem I am facing is with <Glyphicon>, as I am new to react can anyone tell me the alternative of this tag.

This is how my code looks like

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

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

score 1 · Answer 1 · answered Dec 09 '20 at 07:19

Font-awesome 5 has an official react package you can use, at 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

Pick one of the two depending on what you're now using. If you want to minimise code changes you can also create a transition library e.g. make a file like 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 />
   );
}

Now using this you'd just need to swap the import from import { Glyphicon } from 'react-bootstrap'; to import { Glyphicon } from './GlyphiconToFa.js' wherever it's used (adjusting paths of course).

This should reduce code changes needed to only the imports

This is nice solution but for now I have 2 to 3 `Glyphicon` tags for which this work is not worth it, so replacing it with simple button and icon. — Ashish Rathi, Dec 10 '20 at 04:22

score 0 · Accepted Answer · answered Dec 09 '20 at 07:07

Replaced

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

with below code

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

We can also use font awesome icon instead of glyphicon glyphicon-remove

How to replace Glyphicon tag in react

2 Answers2