Laden von Schriftarten Icons mit React

Question

Ich habe einige Icons über das flaticon heruntergeladen. Jetzt versuche ich ein Symbol in meiner Komponente zu verwenden, aber etwas schief geht. Ich importiere das CSS innerhalb meiner Komponente und ließ meine Datei webpack.config.json so einstellen, dass alle Schriftdateien mit dem Datei-Loader geladen werden.

was mache ich falsch?

meine Lader in webpack.config.json:

loaders: [ 
     { 
      test: /\.(jpe?g|png|gif|svg|eot|ttf|woff)$/i, 
      loader: 'file-loader', 
      query:{ 
       hash:'sha512', 
       digest:'hex', 
       name:'[hash].[ext]' 
      } 
     }, 
     { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react'], 
      } 
     }, 
     { 
      test: /\.css$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: combineLoaders([ 
       { 
        loader: 'style-loader' 
       }, { 
        loader: 'css-loader', 
        query: { 
         modules: true, 
         camelCase: 'dashes', 
         localIdentName: '[name]__[local]___[hash:base64:5]' 
        } 
       } 
      ]) 
     } 
    ] 

meine Komponente - LocationIndicator.js:

import React from 'react'; 
import locationFonts from '../../../location-fonts/flaticon.css'; 

var LocationIndicator = React.createClass({ 
    render: function() { 
     return(
      <span className={locationFonts['flaticon-cactus']}></span> 
     ); 
    } 

}); 

export default LocationIndicator; 

flaticon.css:

/* 
    Flaticon icon font: Flaticon 
    Creation date: 24/02/2017 14:52 
    */ 

@font-face { 
    font-family: "Flaticon"; 
    src: url("./Flaticon.eot"); 
    src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), 
     url("./Flaticon.woff") format("woff"), 
     url("./Flaticon.ttf") format("truetype"), 
     url("./Flaticon.svg#Flaticon") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
    font-family: "Flaticon"; 
    src: url("./Flaticon.svg#Flaticon") format("svg"); 
    } 
} 

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 
    font-family: Flaticon; 
     font-size: 20px; 
font-style: normal; 
margin-left: 20px; 
} 

.flaticon-cactus:before { content: "\f100"; } 
.flaticon-desert-cactus:before { content: "\f101"; } 
.flaticon-location:before { content: "\f102"; } 
.flaticon-map-marker:before { content: "\f103"; } 
.flaticon-map-with-position-marker:before { content: "\f104"; } 
.flaticon-placeholder-circle:before { content: "\f105"; } 
.flaticon-placeholder-map:before { content: "\f106"; } 

die ttf, EOT, Woff, Svg-Datei sind an der gleichen Stelle wie die css

danke!

edit: Ich bin ein Druckbild des Quellcodes nach der Kompilierung hinzugefügt, die Dateinamen und Verweise noch passen ...

source code from browser

Answer 1

Schließlich die Antwort gefunden zu laden!

Das Problem war in der Tat etwas mit den neuen Namen von den Ladern als Stefan van de Vooren vorgeschlagen. Aber nicht in den Font-Dateinamen. Beachten Sie, dass in flixicon.css nur Klassen, die mit "fla- licon-" oder "flicicon-" beginnen, "font-family: Flaticon;" erhalten. aber meine CSS-loader die neuen Selektornamen nach folgenden Regel zu erzeugen konfiguriert wurde:

localIdentName: '[name]__[local]___[hash:base64:5]' 

die Wähler Namen erstellt, die nicht die Regel Familie für die Schriftart entsprechen. So wurde meine Lösung, die Reihenfolge der [name] ersetzt und [local]:

localIdentName: '[local]__[name]___[hash:base64:5]' 

jetzt die neuen Namen beginnen mit dem ursprünglichen Selektorname die ‚flaticon-‘ ist.

Answer 2

Es ist ein wenig schwer zu sagen, was schief geht. Ich denke, Ihr Webpack-Datei-Lader gibt den Fonts einen anderen Namen mit dem Hash im Datei-Loader. Aufgrund des neuen Dateinamens (Hash) konnte der Browser die in Ihrem CSS definierten Schriften (Flatico. *) Nicht finden.

Ich verwende eine spezielle Datei-Loader in meinem webpack die Schriften in der Ausgabe zu erhalten.

{ test: /\.(svg|eot|ttf|woff|woff2)$/, loader: 'file?name=fonts/[name].[ext]', include: [path.resolve(__dirname, 'app/fonts')] }

Meine Schriften werden in der App/Fonts-Ordner gespeichert. Alle Schriftarten werden in den Ausgabeordner ohne ihren Dateinamen geändert

Answer 3

Ich habe das gleiche Problem festgestellt. Ich verwende benutzerdefinierte Schriftart auf meinem aktuellen Projekt, ich muss :global hinzufügen, da ich nicht wollen, dass CSS-Loader-Hash mein Klassenname.

:global [class^="icon-"]:before, 
:global [class*=" icon-"]:before { 
    ... 
} 

:global .icon-close:before { 
    ... 
} 

PS: Ich url loader bin mit meinen Fonts

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    loader: 'url-loader?limit=1000&name=fonts/[name].[ext]' 
}