java - 如何在我的 React JHipster 应用程序中添加 fontawesome 图标？

Question

我正在使用 JHipster React 开发一个应用程序。

现在我需要添加一个特定的运行图标。该图标可以在这里找到:[ https://fontawesome.com/icons/running?style=solid.] 。

Answer 1

我调查了 Jhipster 项目并发现了自己如何做到这一点。要自行操作，请按照以下步骤操作:

1) 进入 node_modules 目录中的 @fontawesome 目录、free-solid-svg-icons 子目录:

2) 找到您想要的图像(使用 https://fontawesome.com/icons 作为获取特定图像的基础)

3) 在/webapp/app/config/icon-loader.ts 中添加您的图像。我为运行图像添加了:

import { faRunning } from '@fortawesome/free-solid-svg-icons/faRunning';
...
  library.add(
    faSort,
    faEye,
    faSync,
    faBan,
    faTrash,
    faArrowLeft,
    faSave,
    faPlus,
    faPencilAlt,
    faUser,
    faTachometerAlt,
    faHeart,
    faList,
    faTasks,
    faBook,
    faHdd,
    faLock,
    faSignInAlt,
    faSignOutAlt,
    faWrench,
    faThList,
    faUserPlus,
    faAsterisk,
    faFlag,
    faBell,
    faHome,
    faRoad,
    faCloud,
    faTimesCircle,
    faSearch,
    faRunning
  );

4) 在代码中使用图标，先导入，然后使用您在 https://fontawesome.com/icons?d=gallery 中找到的名称来获取它

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