reactjs svg image rendue avec largeur et hauteur nulles dans IE

Question

J'ai créé un composant ReactJS pour afficher les boutons d'édition/suppression dans chaque ligne d'une table de données.

Ceci est mon élément:

import React from 'react'; 

const iconStyle = { 
    border:'none', 
    boxShadow:'none', 
    backgroundColor:'transparent', 
    cursor:'pointer' 

}; 


const RowEditButtons = (props) => { 
    const editButton = props.onEdit ? 
     <button type="button" className="btn btn-sm btn-secondary" onClick={props.onEdit.bind(null,props.index)} style={iconStyle}> 
      <img src="img/icon-pencil.svg" /> 
     </button> 
      : null; 
    const deleteButton = props.onDelete ? 
     <button type="button" className="btn btn-sm btn-secondary" onClick={props.onDelete.bind(null,props.index)} style={iconStyle}> 
      <img src="img/close-o.svg" /> 
     </button> 
      : null; 

    return (
     <div className="btn-group" role="group" aria-label="Edit buttons" > 
      {editButton} 
      {deleteButton} 
     </div> 
    ); 

}; 

RowEditButtons.propTypes = { 
    index: React.PropTypes.number, 
    onEdit: React.PropTypes.func, 
    onDelete: React.PropTypes.func 
}; 

export default RowEditButtons; 

Je teste sur IE (parce que c'est la norme de l'entreprise) et je l'ai remarqué que, parfois, les boutons apparaissent et parfois ils ne le font pas. Parfois, ils vont montrer sur certaines lignes et pas d'autres. Ce n'est pas cohérent. Après avoir regardé le DOM rendu en utilisant les outils de développement, je vois que les boutons et les images sont là, seules les images ont width = "0" et height = "0". Je ne suis pas sûr de ce qui se passe ici, si c'est le navigateur, reactjs, ou bootstrap.

Quelqu'un at-il une idée?

Answer 1

Je viens d'ajouter des styles en ligne à la largeur de réglage de l'élément img et la hauteur à auto. Cela semble avoir résolu le problème.

<img style={{width:'auto',height:'auto'}} src="img/icon-pencil.svg" />