如何在我的React JHipster应用程序中添加一个很棒的图标？

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中找到的名称命名。

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