LaVOZs

The World’s Largest Online Community for Developers

'; java - How to add an fontawesome icon in my React JHipster application? - LavOzs.Com

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.].

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

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
Related
Fastest way to determine if an integer's square root is an integer
How can I tell if I'm running in 64-bit JVM or 32-bit JVM (from within a program)?
How to add local jar files to a Maven project?
How to add local .jar file dependency to build.gradle file?
Unfortunately MyApp has stopped. How can I solve this?
React.js inline style best practices
What is the difference between state and props in React?
Add a fa-icon in JHipster