Je suis en train de créer une application React qui sert de répertoire communautaire pour une scène musicale mondiale dont je fais partie. J'essaie de suivre une stratégie d'icône SVG qui enveloppe le code SVG avec un composant React fonctionnel afin que vous puissiez ensuite importer l'icône dans le composant qui l'utilise comme composant React (Article NYT décrivant la stratégie). Cette stratégie fonctionne pour certains composants, mais pour beaucoup, je reçois des erreurs d'analyse du type :

./src/Components/LargeScopeComponents/ArtistProfileDisplay/TopBar/SVG/ListViewIcon/ListViewIconDarkTheme.js
  Line 4:  Parsing error: Unexpected token, expected "}"

  2 | 
  3 | const ListViewIconDarkTheme = () => (
> 4 | 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.72 53.2"><defs><style>.cls-1{fill:#fff}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M15.38 41.72h42.35V53.2H15.38zM.41 41.72h10.86V53.2H.41zM15.15 20.86H57.5v11.48H15.15zM0 20.86h10.86v11.48H0zM15.15 0H57.5v11.48H15.15zM0 0h10.86v11.48H0z"/></g></g></svg>
    | 	                                                                                         ^
  5 | );
  6 | 
  7 | export default ListViewIconDarkTheme;

Je ne sais pas exactement pourquoi l'analyseur javascript n'aime pas la syntaxe SVG, car cette stratégie fonctionne pour d'autres composants. Par exemple, j'ai utilisé la même stratégie pour créer ce composant fonctionnel, et l'analyseur javascript ne s'est pas plaint lorsque je l'ai inclus dans un composant de carte dans lequel je l'utilise.

import React from 'react';

const CircleUpIcon_LightTheme = () => (
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.28 83.28"><g data-name="Layer 2"><g data-name="Layer 1"><circle cx="41.64" cy="41.64" r="38.64" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="6"/><path d="M41.64 20.7L20.92 56.58h41.43L41.64 20.7z"/></g></g></svg>
);

export default CircleUpIcon_LightTheme;

Je me demande s'il existe des solutions de contournement à cela ou des modifications que je pourrais apporter à la syntaxe SVG pour plaire à l'analyseur javascript. Toute aide serait très appréciée :)

1
gsmbourg 16 mars 2019 à 05:09

2 réponses

Meilleure réponse

Le problème est que la syntaxe svg entre en conflit avec jsx. React prend en charge la plupart des types d'éléments svg (voir : https://reactjs .org/docs/dom-elements.html#all-supported-svg-attributes), mais pour des choses comme <style>, vous devez rendre les enfants compatibles. Par exemple:

<style>{
  `.cls-1{fill:#fff}`
}</style>

Notez les accolades supplémentaires et la conversion de l'enfant en chaîne. Cela devrait corriger votre première erreur.

1
Matt Way 16 mars 2019 à 02:54

La balise de style dans ListViewIconDarkTheme est à l'origine du problème.

Pourquoi n'essayes-tu pas ça ? (voir attribut style)

const ListViewIconDarkTheme = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.72 53.2"><g 
id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path 
class="cls-1" style="fill:#fff" d="M15.38 41.72h42.35V53.2H15.38zM.41 
41.72h10.86V53.2H.41zM15.15 20.86H57.5v11.48H15.15zM0 
20.86h10.86v11.48H0zM15.15 0H57.5v11.48H15.15zM0 0h10.86v11.48H0z"/></g></g> . 
</svg>
);

export default ListViewIconDarkTheme;
0
Rohini 16 mars 2019 à 02:38