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; 

看起来相当简单。我还没有尝试过。