foundation-icon-fonts and react与webpack

Question

我想在我的react.js网页上使用基础图标。我已经用npm安装了foundation-icon-fonts，但是要在我的页面中包含这些图标还需要做些什么呢？

Answer 1

你只需要将Foundation Icon Font CSS文件链接到你的页面，然后你就可以正常使用它了--只需记住，当你使用React时，你必须将所有的class属性转换为classNames属性：

<i className="fi-check"></i>

你也可以像这样将图标封装到无状态的React组件中：

const FoundationIcon = (props) => (
  <i className={`fi-${props.iconName}`}></i>
);

FoundationIcon.propTypes = {
  iconName: React.PropTypes.string.isRequired
}

然后使用它：

const Button = () => (
  <button type="button" className="button">
    <FoundationIcon iconName="check" />
    <span>I get it</span>
  </button>
);

JSFiddle example