iOS_Logo_1024x1024-100.png
  • Home
  • Examples
    Native features
    SSR (getServerSideProps)SSGSSG using fallbackSSG using revalidateCatch-all routes
    Built-in features
    HostingStages & secretsCI/CDStatic i18nMonitoringAPI (Airtable)CSS-in-JSCookies consentAnalyticsIconsCSS AnimationsUI components libraryDocs siteMarkdown as JSX
    Built-in utilities
    I18nLink componentAirtableAsset componentHooksHOCsAPIErrors handlingBundle analysisSVG to ReactSecurity auditTracking useless re-renders
  • Documentation
  • Source code
  • Go to CMS

Built-in features

  • Hosting
  • Stages & secrets
  • CI/CD
  • Static i18n
  • Monitoring
  • API (Airtable)
  • CSS-in-JS
  • Cookies consent
  • Analytics
  • Icons
  • CSS Animations
  • UI components library
  • Docs site
  • Markdown as JSX

Previous section - Next sectionHome

Icons examples, using Font-Awesome

FA provides a free icons set, and paid ones. NRN only comes with the free set.
But it is completely possible to use a paid icon set, if you wish so (we do in our Enterprise apps).

In order to make FA icons usable in both server-side and client-side, you need to manually import those you want to use in the _app component, as follow:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import { config, library } from '@fortawesome/fontawesome-svg-core'; import '@fortawesome/fontawesome-svg-core/styles.css'; // Import your icons, and then add them to the libary import { faGithub } from '@fortawesome/free-brands-svg-icons'; import { faBook, faBookReader, faCoffee, faHome, faUserCog } from '@fortawesome/free-solid-svg-icons'; // See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above library.add( faGithub, faBook, faBookReader, faCoffee, faHome, faUserCog, );

You can then use FA icons like this:


Using the below code:

1 2 3 4 <FontAwesomeIcon icon={['fab', 'github']} /> // fab stands for FontAwesome "Brand" <FontAwesomeIcon icon={['fas', 'home']} /> // fas stands for FontAwesome "Solid"
TypeScript support will guide you when writing <FontAwesomeIcon icon={['fab', 'github']} />, by telling you if the icon is valid.
iOS_Logo_1024x1024-100.png

Uber 12 - 2021
All rights reserved

Terms
Politique de confidentialité
/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg