nodejs24 (UI相关): FontAwesomeIcon图标库+FontAwesomeIcon的两种引入方式&图标样式的配置

本文链接：https://blog.youkuaiyun.com/ResumeProject/article/details/143756112

安装 FontAwesome for React

使用 npm：

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

使用 yarn：

yarn add @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

@fortawesome/react-fontawesome：FontAwesome 的核心 React 组件。
@fortawesome/free-solid-svg-icons：提供免费的一些常用实心图标。
@fortawesome/free-brands-svg-icons：提供品牌图标（如 GitHub、Facebook 等）。
@fortawesome/free-regular-svg-icons：提供常规图标（如用户、信封等）。

使用 FontAwesome 图标示例：

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';  // 导入图标

function MyComponent() {
    return (
        <div>
            <h1>欢迎来到我的应用</h1>
            <p>来一杯咖啡吧！ <FontAwesomeIcon icon={faCoffee} /></p>
        </div>
    );
}

export default MyComponent;

在这里插入图片描述

faCoffee：这是从 @fortawesome/free-solid-svg-icons 包中导入的一个图标。更多图标样式可在https://fontawesome.com/icons找到。

带有定制样式的示例：

在这里插入图片描述

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

function MyComponent() {
    return (
        <div>
            <h1>欢迎来到我的应用</h1>
            <p>来一杯咖啡吧！ 
                <FontAwesomeIcon 
                    icon={faCoffee}