J'ai fabriqué le logo Instagram dans Illustrator et j'ai extrait le code généré et je voudrais transformer ce code dans un composant réactif.
import React from 'react';
/**
* <?xml version="1.0" encoding="utf-8"?>
* Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)
*/
export default ({
style={},
fill0={
offset_1: "9.693880e-02",
offset_2: "0.1426",
offset_3: "0.2263",
offset_4: "0.3378",
offset_5: "0.449",
offset_6: "0.6786",
offset_7: "1",
style_1: "stop-color:#FFD87A",
style_2: "stop-color:#FCCE78",
style_3: "stop-color:#F5B471",
style_4: "stop-color:#EB8D65",
style_5: "stop-color:#E36058",
style_6: "stop-color:#CD3694",
style_7: "stop-color:#6668B0",
},
fill1='#FFFFFF',
viewBox="0 0 512 512",
}) =>
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox={viewBox}
xmlSpace="preserve"
>
<g>
<radialGradient id="SVGID_1_" cx="441.1558" cy="73.5138" r="47.7212" gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)" gradientUnits="userSpaceOnUse">
<stop offset={fill0.offset_1} style={style.fill0.style_1}/>
<stop offset={fill0.offset_2} style={style.fill0.style_2}/>
<stop offset={fill0.offset_3} style={style.fill0.style_3}/>
<stop offset={fill0.offset_4} style={style.fill0.style_4}/>
<stop offset={fill0.offset_5} style={style.fill0.style_5}/>
<stop offset={fill0.offset_6} style={style.fill0.style_6}/>
<stop offset={fill0.offset_7} style={style.fill0.style_7}/>
</radialGradient>
<path
class="st0"
d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"
fill={fill0}
/>
<g>
<path
class="st1"
d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"
fill={fill1}
/>
<path
class="st1"
d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"
/>
<path
class="st1"
d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"
fill={fill1}
/>
</g>
</g>
</svg>
3 Réponses :
Enregistrer SVG dans un fichier comme
et dans
Vous avez eu peu de problèmes dans votre composant, d'abord l'attribut de classe doit être classname , et lors de l'utilisation de l'attribut de style, vous disposez d'un objet non une valeur de chaîne CSS normale, voici un code de composant fixe. ou un lien vers Un code de fonctionnement trop < Pré> xxx
Salut. Merci d'avoir pris l'effort de regarder cela. Maintenant, il affiche le logo, mais en noir et blanc. Pas de couleurs.
Vous êtes les bienvenus, je vais vérifier plus tard c'est ça ok!
En fait, je l'ai réparé rapidement, vérifiez-le à nouveau dans le bac à sable.
Incroyable, ça a fonctionné. Je ne sais toujours pas pourquoi ça n'a pas fonctionné auparavant. Mais merci beaucoup.
L'article est un peu vieux, mais toujours utile CSS-Tricks.com/Creating- svg-icon-system-réact