Search code examples
reactjsbootstrap-4react-bootstrap

How to replace Glyphicon tag in react

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() }} />
Solution

  • 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