5. React Icons. Font Awesome icons.

 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 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zM8 10v5H6.5v-1.5h-2V15H3v-5c0-.55.45-1 1-1h3c.55 0 1 .45 1 1zm-1.5.5h-2V12h2v-1.5zm7 1.5c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1h-4V9h4c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zM11 10.5v.75h2v-.75h-2zm2 2.25h-2v.75h2v-.75z"
}), 'AbcTwoTone');

The highlighted information is the "path d" parameter. 

A react SVG icon can be created as follows:

const AbcTwoToneIcon = createSvgIcon(
  <path d="M21 11h-1.5v-.5h-2v3h2V13H21v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zM8 10v5H6.5v-1.5h-2V15H3v-5c0-.55.45-1 1-1h3c.55 0 1 .45 1 1zm-1.5.5h-2V12h2v-1.5zm7 1.5c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1h-4V9h4c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zM11 10.5v.75h2v-.75h-2zm2 2.25h-2v.75h2v-.75z" />,
  'AbcTwoTone',
);

3. Converting an SVG file to React Icon.

Greg Berger in https://github.com/gregberge/svgr and https://react-svgr.com/docs/cli/ explains how to convert an SVG file to a React component. The trick is getting the "path d" parameter.

For converting the SVG file (icon.svg) to a type:
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg
and you get a React component similar to this (note the "path d" parameter) in the output of the terminal.

import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

4. FontAwesome Icons

Finally, I have decided to continue using Font Awesome icons as the database I am using has references to the icon names in this icon library.

Use only the icons you need, so your application will not grow excessively. Although your code gets more intricate. Here is the file named  GetIcons.tsx that represents a component that can be used as

<GetIconByName name={name} size={size} />

The content of this file is:

import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
import { faArchway          , 
         faBalanceScale     , faBeer             , faBinoculars     , faBlind            , faBriefcase        , 
         faBullhorn         , 
         faCity             , faCloudShowersHeavy, faCloudSunRain   , faCog              , faCogs             , 
         faComment          , faCopy             , faCubes            ,
         
         faEdit             , 
         faFeather          , faFighterJet       , faFile           , faFileImport       , faFileInvoiceDollar, 
         faFolder           ,
         
         faGraduationCap    ,
         
         faHandPointer      , faIdCard           , 
         faKey              ,
         faPlus             , 
         faPrint, 
         faQuestionCircle, 
         faShare, 
         faShareAlt, 
         faSkullCrossbones  , faSun              , 
         faThList           , faThumbsUp         , faTrash          , 
         faUniversity       , faUpload           , faUser        ,
         
       } from '@fortawesome/free-solid-svg-icons'

const defaultIconSize:SizeProp='2x'

interface MyFontAwesomeIconProps extends Omit<FontAwesomeIconProps, 'icon'> {
    name : string
}

// call it as <GetIconByName name={name} size={size} />
export default function GetIconByName (props : MyFontAwesomeIconProps ) { 
    let faProps: FontAwesomeIconProps= {
        icon: faQuestionCircle
    }
    Object.assign(faProps, props)
    if (!faProps.size) faProps.size=defaultIconSize

    switch (props.name) {
    //switch (iconName) {
        case 'fa-archway'             : faProps={...faProps, icon:faArchway}           ; break;

        case 'fa-fa-balance-scale'    : faProps={...faProps, icon:faBalanceScale}      ; break;
        case 'fa-beer'                : faProps={...faProps, icon:faBeer}              ; break;
        case 'fa-binoculars'          : faProps={...faProps, icon:faBinoculars}        ; break;
        case 'fa-blind'               : faProps={...faProps, icon:faBlind}             ; break;
        case 'fa-briefcase'           : faProps={...faProps, icon:faBriefcase}         ; break;
        case 'fa-bullhorn'            : faProps={...faProps, icon:faBullhorn}          ; break;

        case 'fa-city'                : faProps={...faProps, icon:faCity}              ; break;
        case 'fa-cloud-showers-heavy' : faProps={...faProps, icon:faCloudShowersHeavy} ; break;
        case 'fa-cloud-sun-rain'      : faProps={...faProps, icon:faCloudSunRain}      ; break;
        case 'fa-cog'                 : faProps={...faProps, icon:faCog}               ; break;
        case 'fa-cogs'                : faProps={...faProps, icon:faCogs}              ; break;
        case 'fa-comment'             : faProps={...faProps, icon:faComment}           ; break;
        case 'fa-copy'                : faProps={...faProps, icon:faCopy}              ; break;
        case 'fa-cubes'               : faProps={...faProps, icon:faCubes}             ; break;
        
        case 'fa-edit'                : faProps={...faProps, icon:faEdit}              ; break;

        case 'fa-feather'             : faProps={...faProps, icon:faFeather}           ; break;
        case 'fa-fighter-jet'         : faProps={...faProps, icon:faFighterJet}        ; break;
        case 'fa-file'                : faProps={...faProps, icon:faFile}              ; break;
        case 'fa-file-import'         : faProps={...faProps, icon:faFileImport}        ; break;
        case 'fa-file-invoice-dollar' : faProps={...faProps, icon:faFileInvoiceDollar} ; break;
        case 'fa-folder'              : faProps={...faProps, icon:faFolder}            ; break;

        case 'fa-graduation-cap'      : faProps={...faProps, icon:faGraduationCap}     ; break;

        case 'fa-hand-pointer'        : faProps={...faProps, icon:faHandPointer}       ; break;
        case 'fa-id-card'             : faProps={...faProps, icon:faIdCard}            ; break;

        case 'fa-key'                 : faProps={...faProps, icon:faKey}               ; break;

        case 'fa-print'               : faProps={...faProps, icon:faPrint}             ; break;
        case 'fa-plus'                : faProps={...faProps, icon:faPlus}              ; break;

        case 'fa-share'               : faProps={...faProps, icon:faShare}             ; break;
        case 'fa-share-alt'           : faProps={...faProps, icon:faShareAlt}          ; break;
        case 'fa-skull-crossbones'    : faProps={...faProps, icon:faSkullCrossbones}   ; break;
        case 'fa-sun'                 : faProps={...faProps, icon:faSun}               ; break;
        
        case 'fa-th-list'             : faProps={...faProps, icon:faThList}            ; break;
        case 'fa-thumbs-up'           : faProps={...faProps, icon:faThumbsUp}          ; break;
        case 'fa-trash'               : faProps={...faProps, icon:faTrash}             ; break;

        
        case 'fa-university'          : faProps={...faProps, icon:faUniversity}        ; break;
        case 'fa-upload'              : faProps={...faProps, icon:faUpload}            ; break;
        case 'fa-user'                : faProps={...faProps, icon:faUser}              ; break;
        
        
        default                       : faProps={...faProps, icon:faQuestionCircle}    ;break;
    }
    return <FontAwesomeIcon {...faProps} />  
        
}






Comentarios

Publicar un comentario

Entradas populares de este blog

15. Next.js Tutorial (2). Fetching data. Async functions getStaticProps, getServerSideProps, getStaticPaths

Imagen
 1. Fetching data at the beginning of the application In the index.tsx (index.ts) you can use one of these 2 asyncfunctions: getStaticProps()  which works in client-side pre-rendering and the content is reused. So only one call is made, and it is made at build time . This is quicker. getServerSideProps()  that works on the server-side rendering and every call can produce different results as data changes. Use only if you need to render a page whose data must be fetched at request time such as authorization. //export async function getStaticProps() { / / only on pre-rendering export async function getServerSideProps ( ) { // only on server side rendering const allPostsData = getSortedPostsData ( ) ; return { props : { allPostsData , } , } ; } export default function Home ( { allPostsData } : { allPostsData : PostData [ ] } ) { return ( < Layout home > . . . . . . . Do not use API route inside getServ...
Leer más

14. Next.js Tutorial (1)

 1. Introduction. (No Next.js) Basic example. Load React, React-Dom, and Bable from unpkg.com !-- index . html --> < html > < body > < div id = "app" > </ div > <!-- React--> < script src = "https://unpkg.com/react@17/umd/react.development.js" > </ script > <!-- React-DOM --> < script src = "https://unpkg.com/react-dom@17/umd/react-dom.development.js" > </ script > <!-- Babel Script --> < script src = "https://unpkg.com/@babel/standalone/babel.min.js" > </ script > <!--script type="text/javascript"--> < script type = "text/jsx" > const app = document . getElementById ( ' app ' ) ; ReactDOM . render ( < h1 > Develop . Preview . Ship . < / h1 > , app ) ; </ script > </ body > </ html > Three dependencies are enclo...
Leer más

10. React deployment on Nginx (5). Passing client certificate DN to react client

Imagen
 0. Nginx installation #------------------------------------------------------ # INSTALLATION # @see Mohammad Faisal #------------------------------------------------------ #1. Install nginx sudo apt-get update sudo apt-get install nginx #2. verify installation sudo nginx -v #------------------------------------------------------ # STARTUP SETTINGS #------------------------------------------------------ #start Nginx when server restarts sudo systemctl enable nginx #only for checking if nginx is running systemctl status nginx Now, change the local port (for instance to 8081) if you have another server (apache) in port 80 sudo nano /etc/nginx/sites-available/default ( OLD VERSIONS of NGINX !!! ) In newer versions of nginx use this file instead sudo nano /etc/nginx/conf.d/default.conf and edit the port from 80 to 8081 and also change the root from /var/www/html   to another folder like /home/ximo/my-react-app , but to avoid router probl...
Leer más