react-fontawesome

react-fontawesome 是一个基于 React 的组件库，用于使用 Font Awesome 图标。此库支持 Font Awesome 5 和 Font Awesome 4。

特性

• 支持 Font Awesome 5 和 Font Awesome 4
• 支持自定义图标风格
• 可以使用 Font Awesome Pro，只需添加许可证密钥
• 易于使用

安装

使用 npm：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

（如果您需要支持 Font Awesome 4，请使用 @fortawesome/fontawesome 代替 @fortawesome/fontawesome-svg-core 和 @fortawesome/free-solid-svg-icons）

用法

使用 Font Awesome 5：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

class MyComponent extends React.Component {
  render() {
    return <FontAwesomeIcon icon={faCoffee} />;
  }
}

使用 Font Awesome 4：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/fontawesome';

class MyComponent extends React.Component {
  render() {
    return <FontAwesomeIcon icon={faCoffee} />;
  }
}

自定义

您可以使用 @fortawesome/free-brands-svg-icons 导入 Font Awesome 的品牌图标，并使用 Icon 组件自定义您的图标样式：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

class MyComponent extends React.Component {
  render() {
    return (
      <FontAwesomeIcon
        icon={faGithub}
        style={{ backgroundColor: 'black', color: 'white', borderRadius: 8 }}
        size="4x"
      />
    );
  }
}

许可证

此软件包根据 MIT 许可证授权。Font Awesome 图标根据 Font Awesome 的许可证授权。要使用 Font Awesome Pro，请获取许可证密钥，并将其添加到您的 Webpack 配置中。

总结

react-fontawesome 是一个非常方便的基于 React 的组件库，用于使用 Font Awesome 图标。它支持 Font Awesome 5 和 Font Awesome 4，并支持自定义图标风格。使用 react-fontawesome 让您轻松地为您的应用程序添加精美的图标，并且易于使用。