Webpack,React和基础图标

时间:2017-02-15 17:37:21

标签: reactjs webpack icons

我通过npm安装了基础图标。如何配置我的webpack配置只包含组件呈现方法中需要的类名的标记?

1 个答案:

答案 0 :(得分: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导入foundation-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;

看起来很简单。我虽然没试过。

相关问题