Je reçois une erreur lors de la création d'un composant fonctionnel qui renvoie un SVG. Qu'est-ce qui se passe ici?
Voici le code: essentiellement, je veux utiliser SVG comme composant.
Si cela n'est pas satisfait s'il vous plaît laissez-moi savoir une autre manière d'utiliser SVG dans réagir. Je suis NEWBIE
3 Réponses :
Qu'est-ce que faire quelque chose comme style = "# 3ba9ee" est censé faire? Ce n'est pas la façon dont vous spécifiez les styles. Voir https://developer.mozilla.org/en-us / Docs / Web / SVG / Attribut / Style
problème existe toujours im utilisant css dans js
@sriramhegde J'ai édité ma réponse, vois comment ça se fait
style doit déclarer des propriétés auxquelles vous attribuez des valeurs, je suppose que vous voulez faire quelque chose comme https://developer.mozilla.org/en -Us / docs / web / svg / attribut / style style = "trait: # 3ba9ee" . .
oui j'ai changé le code que je reçois toujours la même erreur
Ce que vous avez fait, vous produirez style = "rouge" , vous en avez besoin pour produire style = "remplir: rouge"
Vous devez ajouter le remplir propriété Dans l'élément SVG, comme indiqué ci-dessous,
import React from "react";
const TwitterIcon = () => {
const { fill, width, height } = styles;
return (
<svg
viewBox="328 355 335 276"
height={height}
width={width}
xmlns="http://www.w3.org/2000/svg"
fill={fill}
>
<path d="M 630, 425A 195, 195 0 0 1 331, 600A 142, 142 0 0 0 428, 570A 70, 70 0 0 1 370, 523 A 70, 70 0 0 0 401, 521A 70, 70 0 0 1 344, 455 A 70, 70 0 0 0 372, 460A 70, 70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A 67, 67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363A 65, 65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A 65, 65 0 0 1 630, 425Z" />
</svg>
);
};
const styles = {
fill: "grey",
width: 210,
height: 500
};
export default TwitterIcon;
@ sriram pouvez-vous vérifier c'est ce que vous attendez et de quelle couleur vous voulez remplir, faites-moi savoir! codesandbox.io/s/59531561-so-w61t7
son travail pouvez-vous mettre à jour la réponse
Donc je peux l'accepter
Ajout de la réponse que vous pouvez l'accepter et uppote si cela vous a aidé, merci sriram :)
ok encore une façon de réduire la taille de l'icône c'est trop gros
Vous pouvez ajouter de la largeur et de la hauteur, j'ai mis à jour la codesandbox que vous pouvez vérifier codesandbox.io/s/ 59531561-SO-W61T7 , laissez-moi savoir si cela a fonctionné pour vous
Ouais ça marche puis-je ajouter que CSS dans la propriété JS Styles?
Oui et vous pouvez utiliser comme style.Width et style.Height
Veuillez le modifier dans CODESANDBOX Je suis NEWBIE AU CODING
Mise à jour de la réponse avec toutes les commentaires requis :) Codage heureux :)