Dantesque React

 1. Selecting the icon library Any will do. React recommends using icons in SVG format. Here are some examples: 1.1 Material Icons . Can be installed as: npm install @mui /icons-material 1.2 FontAwesome . That can be installed  as npm i --save @fortawesome /fontawesome-svg-core npm install --save @fortawesome /free-solid-svg-icons npm install --save @fortawesome /react-fontawesome 1.3 Google Material desing . That has been migrated to React npm install mdi-material-ui --save 2. Creating an SVG Icon by its "path d" parameter For instance, the file " AbcTwoTone.js " that represents the AbcTwoTone icon, in the folder " node_modules/@mui/icons-material/esm " has this content import createSvgIcon from ' ./utils/createSvgIcon ' ; import { jsx as _jsx } from " react/jsx-runtime " ; export default createSvgIcon ( /*#__PURE__*/ _jsx ( " path " , { d : " M21 11h-1.5v-.5h-2v3h2V13H21v1c0 .55-.45 1-1 1

0. Introduction These are the main steps: Create the project as indicated in a previous post Defining how to apply i18n to the project Create a component for selecting the language Create the login form 1. How to apply i18n? Lets create a map with a key and an array of the traductions (we are using 6 languages: 0:Catalonian, 1:Spanish, 2:English, 3: French, 4: German, 5: Romanian, 6:Italian), and a funtion that retrieves the i18n text from the map knowing the key and the language number //A map with the values in different languages //This data can be in the same component that uses it or in a separate module const i18nMap = new Map < string , string [ ] > ( [ // <--key-->|<-----Catalonian---->|<------Spanish--------->|<-English-->|<---French--->|<----German---->|<----Romanian--->|<---Italian-----> [ ' login ' , [ " Entrar al sistema " , " Entrar al sistema " , " Logi