CODEWITHSUNDEEP
javareactjsjhipster
rod.dinis
rod.dinis

Reputation: 1463

How to add an fontawesome icon in my React JHipster application?

I am developing an application using JHipster React.

Now I need a specific running icon to be added. That icon can be found here: [https://fontawesome.com/icons/running?style=solid.].

Upvotes: 0

Views: 721

Answers (1)

rod.dinis
rod.dinis

Reputation: 1463

I have investigated the Jhipster project and discovered how to do that myself. To do it yourself, follow the steps below:

1) Go into @fontawesome directory, free-solid-svg-icons subdirectory, in your node_modules directory: free-solid-svg-icons directory

2) Find the image you want (use https://fontawesome.com/icons as base for getting your specific image)

3) Add your image in the /webapp/app/config/icon-loader.ts. I added for the running image:

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) Use the icon in your code, import first then take it by the name you find in https://fontawesome.com/icons?d=gallery

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

Upvotes: 4

Related Questions