Erstellen einer SVG-Sprite-Komponente mit ausgeworfener create-react-app

Question

Ich verwende die create-react-applibrary und ich habe eine SVG-Komponente erstellt, die in der Entwicklung gut funktioniert. Mein Problem ist, dass beim Erstellen der zu veröffentlichenden Anwendung der Build-Prozess die dynamischen Pfade meiner Komponente nicht erkennt und daher die Haupt-Sprite-Datei nicht in meinen Ordner legt.

Beispiel SVG Komponente:

render() { 
    return (
     <svg className={`icon ${this.props.id}`} fill={this.props.fill}> 
      <use xlinkHref={`/src/assets/images/svg-sprite/svg-sprite-${this.props.category}-symbol.svg#ic_${this.props.id}_24px`}></use> 
     </svg> 
    ); 
} 

Wie Sie sehen, ich bestimmte Symbole in bestimmten Sprite Dateien bin verweist.

Answer 1

Wenn Sie vor 0.5.0 ausgeworfen haben, ist import die einzige Möglichkeit, sie in die Build-Ausgabe einzufügen. Dafür gibt es gute Gründe: Zum Beispiel enthalten ihre Dateinamen automatisch einen Hash, weil das Build-System sie kennt, sodass Sie sich keine Sorgen machen müssen, dass Browser-Caches zerstört werden, wenn sich die Datei ändert. Sie müssen sich auch keine Gedanken über Tippfehler machen, da eine fehlende Datei einen Kompilierungsfehler verursacht.

Seit 0.5.0 unterstützen wir auch einen public Ordner als Notausstieg. Sie können alle Dateien in den Ordner public einfügen und sie werden mit der Build-Ausgabe zusammengeführt. Das einzige Problem ist, dass Sie die Links process.env.PUBLIC_URL hinzufügen müssen. Dies stellt sicher, dass wenn Sie ein Projekt für eine Nicht-Root-URL (wie GitHub Pages) erstellen, es immer noch ordnungsgemäß funktioniert.

<use linkHref={process.env.PUBLIC_URL + `/assets/images/svg-sprite/svg-sprite-${this.props.category}-symbol.svg#ic_${this.props.id}_24px`}></use> 

würde funktionieren, solange Ihre public Ordner assets/images/svg-sprite/svg-sprite-* Dateien enthält.

Bitte beachten Sie noch einmal, dass diese Funktion erst seit react-scripts@0.5.0 verfügbar ist. Wenn Sie die Datei früher ausgeworfen haben, müssen Sie sie möglicherweise in Ihr Projekt zurückportieren.

Referenz:

• Using the public Folder
• Pull Request adding support for it

Answer 2

Für den Fall, dass jemand in dieses Problem läuft ... Ich schaute in die webpack.config.prod.js und fand einen Kommentar, der alle Dateien Sie import in den Ordner /media eingebaut sagt. Mein Problem wurde behoben, indem alle meine SVG-Sprite-Dateien importiert wurden, was nicht ideal ist, aber den Job erledigt hat.