¿Cómo integrar FontAwesome 5 Pro con React?

Si hallas algún fallo con tu código o proyecto, recuerda probar siempre en un entorno de testing antes subir el código al proyecto final.

Solución:

A continuación, le indicamos cómo integrar Font Awesome 5 Pro con React (2018):

1. Compre una licencia Pro en la página de precios de Font Awesome
2. Si tiene éxito, ignore las páginas de éxito. Debes iniciar sesión en Font Awesome. En el estado de inicio de sesión, vaya a esta guía: Guía de instalación de Font Awesome.
3. Si ha iniciado sesión y tiene una licencia válida key en su cuenta, cada fragmento de código de este tutorial utilizará su token de acceso.
4. Ahora, puede instalar su licencia key globalmente a través de (A) npm config set ... o localmente por proyecto a través de (B) .npmrc. Recomiendo (B) para que otros compañeros de equipo también puedan instalar el paquete pro.

5. Para (B), vaya a su directorio package.json y cree un .npmrc Archivo. En ese archivo, pegue el fragmento de código proporcionado en la guía. Debería verse algo como esto:

   // .npmrc
   @fortawesome:registry=https://npm.fontawesome.com/
   //npm.fontawesome.com/:_authToken=
   

6. Una vez hecho esto, debería poder instalar los paquetes pro. De acuerdo con el adaptador de reacción oficial react-fontawesome, están disponibles como los siguientes paquetes npm:

   • @ fortawesome / pro-solid-svg-icons
   • @ fortawesome / pro-regular-svg-icons
   • @ fortawesome / pro-light-svg-icons
7. Así que ahora hazlo npm install @fortawesome/pro--svg-icons para instalar el paquete profesional de su elección.

8. A partir de entonces, continúe con el uso según lo provisto por el paquete react-fontawesome. Que debería verse así en su código de reacción si instaló la versión ligera y utilizó el método ‘Biblioteca’ de react-fontawesome:

   // app.js
   import  library, config  from '@fortawesome/fontawesome-svg-core'
   import  fal  from '@fortawesome/pro-light-svg-icons'
   
   library.add(fal)
   

9. Finalmente, el uso se parece a esto en un archivo de componente (disponible tanto en JS como en TS):

   // Foo.jsx
   import  FontAwesomeIcon  from '@fortawesome/react-fontawesome'
   
   const Foo = () => 
     return (
       
     )
   
   
   export default Foo
   

   Y si te gusta Typecript:

   // Foo.tsx
   import  FontAwesomeIcon  from '@fortawesome/react-fontawesome'
   import  IconLookup  from '@fortawesome/fontawesome-svg-core'
   
   const Foo = () => 
     const icon: IconLookup =  prefix: 'fal', iconName: 'utensils' 
     return (
       
     )
   
   
   export default Foo
   

Debe usar un TOKEN para acceder a Font Awesome Pro a través de NPM.

Descargar manualmente los iconos e instalarlos localmente es un anti-patrón y no la forma en que el equipo de Font Awesome espera que use Font Awesome Pro con Node y NPM.

El acceso a los paquetes Pro requiere que configure el alcance @fortawesome para usar el registro Font Awesome Pro NPM usando su SIMBÓLICO que se puede encontrar en la configuración de su cuenta de Font Awesome.

1. Inicie sesión para ver su token: https://fontawesome.com/account/services
2. Navega a este tutorial paso a paso después de iniciar sesión y contendrá su token en todos los ejemplos: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro
3. Instalar react-fontawesome y siga los ejemplos para renderizar iconos: https://github.com/FortAwesome/react-fontawesome

Nota: Si está buscando utilizar Font Awesome Pro en Reaccionar nativo, echa un vistazo a: react-native-fontawesome-pro

tldr; Usar @fortawesome/pro-light-svg-icons, @fortawesome/pro-regular-svg-icons Paquetes de NPM.

Hoy me encontré con este problema y creo que no se ha abordado la cuestión principal de cómo usar la versión Pro de los íconos. Los documentos oficiales no ayudan mucho. Esto es lo que tuve que hacer para usar faFilePlus icono, la versión ligera:


import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import faFilePlus from '@fortawesome/pro-light-svg-icons/faFilePlus';


y luego:

Tenga en cuenta el uso de @fortawesome/pro-light-svg-icons Paquete NPM. Esto no está documentado en ningún lugar de los documentos oficiales de la FA y tuve que buscar en varios lugares para llegar a esta solución. Los documentos oficiales solo hablan sobre el uso de iconos “gratuitos”, pero no dicen dónde encontrar el paquete NPM equivalente para light, regular, etc.

También tenga en cuenta que esto requiere que NPM esté autenticado como se menciona en una de las respuestas.

Te mostramos comentarios y valoraciones

Tienes la opción de añadir valor a nuestro contenido participando con tu experiencia en las notas.

---

---

Utiliza Nuestro Buscador