Webpack，React和基礎圖標

Question

我通過npm安裝了基礎圖標。我怎樣才能配置我的webpack配置，只需在組件渲染方法中包含所需類名的標籤？

Answer 1

這是如何，我從foundation-icons包本身抓住這個webpack配置。

module.exports = { 
    module: { 
    loaders: [ 
     // the url-loader uses DataUrls. 
     // the file-loader emits files. 
     { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } 
    ] 
    } 
}; 

不要忘記安裝裝載機：

npm install url-loader --save-dev 
npm install file-loader --save-dev 

最後，從進口基礎App.js，icons.css，並使用特定的基礎圖標。

import 'foundation-icons/foundation-icons.css'; 

import React, {Component} from 'react'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <i className="step fi-like size-48"></i> 
     </div> 
    ); 
    } 
} 

export default App; 

看起來相當簡單。我還沒有嘗試過。