带有 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} />
}

Answer 2

肯定有几种方法可以解决这个问题。 我在我的项目中通过将我需要的图标直接导入我的 React 应用程序来解决它。 所以没有 Font Awesome 库位于客户端，只有渲染的 SVG。

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faAdobe } from '@fortawesome/free-brands-svg-icons/faAdobe' ... return ( <FontAwesomeIcon icon={faAdobe} /> )

Font Awesome 还提供了一个页面来讨论其他方法： 服务器端渲染

Answer 3

我将把它作为答案，因为这是一种方式，但是我觉得那里有更好的解决方案，所以我不会接受这个。

我创建了一个static/css文件夹，然后复制了问题中引用的 css 文件

cp node_modules/@fortawesome/fontawesome-svg-core/styles.css static/css/fortawesome.css

然后在_document.js我通过link标签加载文件：

<link
    rel="stylesheet"
    type="text/css"
    href="/static/css/fortawesome.css"
/>

我认为这是一个权宜之计的解决方案。 一个明显的问题是，当底层库更新时，我需要手动复制最新版本的 css 文件。

Answer 4

我遇到了同样的问题，并通过手动将 Font Awesome 的 CSS 插入到我知道会正确 SSR 的样式中来修复它。

我使用styled-components ，它很容易通过 Next.js SSR 进行设置，这是我的做法：

import { createGlobalStyle } from "styled-components";
import { config, dom } from "@fortawesome/fontawesome-svg-core";

// Prevent FA from adding the CSS
// (not that it was doing it in the first place but might as well)
config.autoAddCss = false;

// Add the FA CSS as part of Global Styles
const GlobalStyles = createGlobalStyle`
    ${dom.css()}
`;

Answer 5

这是我迄今为止在我的项目中尝试解决此问题的方法：

1. 安装@zeit/next-css、@zeit/next-sass [我也需要 sass。]
2. 安装 fontawesome 包并导入 CSS

安装@zeit 包

安装所需的软件包：

npm i --save @zeit/next-css
npm i --save @zeit/next-less
npm i --save @zeit/next-sass

然后更新next.config.js文件，如下所示，它将支持 CSS 导入，解决加载时加载正确样式的问题：

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");
module.exports = withLess(withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });
        return config
    }
})));

安装 fontawesome 包并导入 CSS

安装所需的软件包：

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

然后，您可以在扩展位于pages目录下的React.Component的页面中使用以下代码：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'
import '@fortawesome/fontawesome-svg-core/styles.css';
library.add(fas);

那么这就是您可以使用字体的方式：

<FontAwesomeIcon icon={["fas", "user-tie"]} />

我可能是错的。