带有 FortAwesome 和 SSR 的 Next.js

Question

我正在构建一个Next.js应用程序并寻找一个可以使用其 SSR 范式的图标包。

在尝试了几个库之后，我现在正在使用FortAwesome/react-fontawesome，这看起来很有希望。

问题是当页面加载时图标很大（无样式），然后突然它们的样式正确。我想弄清楚如何让这些风格服务器端。

我见过人们谈论导入 FortAwesome 提供的样式表：

import '@fortawesome/fontawesome-svg-core/styles.css';

但是，我不确定这应该在哪个文件中完成，而且，当我尝试这样做时，Next 会抱怨：

[错误] ./node_modules/@fortawesome/fontawesome-svg-core/styles.css 1:8 Module parse failed: Unexpected token (1:8) 您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器处理这个文件

我看过CSS plugin，但这似乎也是一个红鲱鱼。

如何使用 Next.js 在服务器上设置此包中字体很棒的图标的样式？

Answer 1

React-fontawesome 添加了一个关于如何让 FontAwesome 与 Next.js 一起工作的部分。

https://github.com/FortAwesome/react-fontawesome#nextjs

./pages/_app.js在你的项目中创建一个文件

import React from 'react'
import App, { Container } from 'next/app'
 
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}
 
export default MyApp

或使用功能组件：

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}