如何在 Gatsby 中添加字体图标

在 Gatsby 中添加字体图标需要使用第三方库 react-icons。这个库提供了丰富的图标和简单易用的 API，可以快速集成到 Gatsby 项目中。

安装 react-icons

首先需要安装 react-icons。在项目根目录下使用以下命令：

npm install react-icons --save

使用 react-icons

安装完成后，可以选择需要的图标并在组件中直接使用：

import { FaGithub } from 'react-icons/fa';

const MyComponent = () => (
  <div>
    <FaGithub size={32} />
  </div>
);

这个例子展示了如何使用 react-icons 的 FaGithub 符号和更改其大小。

自定义字体图标

有时可能需要使用自定义字体图标。这时需要将字体文件和 CSS 文件添加到 Gatsby 项目中。

1. 在项目的 /static 目录下创建一个新的子目录 /fonts，并将字体文件放在其中。例如：

static/fonts/my-custom-icon.eot
static/fonts/my-custom-icon.svg
static/fonts/my-custom-icon.ttf
static/fonts/my-custom-icon.woff
static/fonts/my-custom-icon.woff2

2. 创建一个新的 CSS 文件 font-icons.css，并将其放在项目的 /src 目录下。例如：

@font-face {
  font-family: 'my-custom-icon';
  src: url('../static/fonts/my-custom-icon.eot');
  src: url('../static/fonts/my-custom-icon.eot?#iefix') format('embedded-opentype'),
    url('../static/fonts/my-custom-icon.woff2') format('woff2'),
    url('../static/fonts/my-custom-icon.woff') format('woff'),
    url('../static/fonts/my-custom-icon.ttf') format('truetype'),
    url('../static/fonts/my-custom-icon.svg#my-custom-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: 'my-custom-icon' !important;
  font-size: 16px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-my-custom-icon:before {
  content: "\e900";
}

这个 CSS 文件定义了一个新的字体 my-custom-icon，并定义了一个 .icon 类来表示所有的字体图标。icon-my-custom-icon 类定义了一个特定的字体图标，并使用伪元素 :before 来添加图标的 Unicode 码点。

3. 在项目的 gatsby-browser.js 文件中引入 CSS 文件：

import './src/font-icons.css';

4. 在项目中使用新的字体图标：

<i class="icon icon-my-custom-icon"></i>

这个例子展示了如何使用新的字体图标。这些图标必须在 CSS 文件中定义，它们将被引用为 .icon-my-custom-icon 类。注意需要使用 icon 类定义 font-size 和 font-family。

结论

这篇文章介绍了如何在 Gatsby 项目中添加字体图标，并提供了自定义字体图标的示例。react-icons 库可以非常方便地加载常见的字体图标，而自定义字体图标可以为项目添加独特的元素。