By using a third-party icon library

Steps to Create the React Application And Installing Module:

Example 2: The following code demonstrates the usage of third party icons. Import the Icon component from @chakra-ui/react

npm install react-icons --save

Write the codes in the respective files. In the “ThirdPartyIcon.js” file, we are importing only some of the thrid party icons like Flat color Icons,Bootstrap icons,Ant Design Icons, Box Icons, Game Icons, Material Design Icons. The developer can choose to include any other third party icons and use them as per the need.

Javascript

import { ChakraProvider, Text, 
         Flex, Box} from "@chakra-ui/react";
import IconApp from "./ThirdPartyIcon";

import "./App.css";
 
function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="600"                
                my="1rem"
            >                
                w3wiki - ReactJS Concepts
            </Text>
            <h3><b>Chakra UI Third Party icons</b></h3>    
            <br/> 
            <IconApp />                    
           
        </ChakraProvider>
    );
} 
export default App;

Javascript

// Filename - ThirdPartyIcon.js
 
 import { Icon, Flex,Box } from "@chakra-ui/react";

import { FcCallTransfer,FcBarChart } from 'react-icons/fc';
import { Bs8CircleFill, BsAlarmFill } from "react-icons/bs";
import { AiFillBank,AiFillAlert } from "react-icons/ai";
import { BiAddToQueue,BiAlarm } from "react-icons/bi";
import { Gi3DStairs,Gi3DGlasses } from "react-icons/gi";
import { Md10K,Md123 } from "react-icons/md";


 
function IconApp() {
    return (
        
        <Flex direction="row" justifyContent="space-around">                  
                    
                <a href="#">
                    <Box width="100%" 
                    bg="lightgrey" 
                    p={2}><FcBarChart /></Box> 
                </a>                
                <a href="#">
                    <Box width="100%" bg="olive"
                    p={2}><FcCallTransfer/>
                    </Box>
                </a>                
                <a href="#">
                    <Box width="100%" bg="lightgrey"
                         p={2}><Bs8CircleFill />
                    </Box>
                </a>                
                <a href="#">
                    <Box width="100%" bg="olive" 
                         p={2}><BsAlarmFill/>
                     </Box> 
                </a>                
                <a href="#">
                    <Box width="100%" bg="lightgrey" 
                         p={2}><AiFillBank />
                    </Box>
                </a>
                <a href="#">
                    <Box width="100%" bg="olive" 
                         p={2}><AiFillAlert />
                    </Box>
                </a>                
                <a href="#">
                    <Box width="100%" bg="lightgrey" 
                         p={2}><BiAddToQueue/>
                    </Box> 
                </a>                
                <a href="#">
                    <Box width="100%" bg="olive" 
                        p={2}><BiAlarm />
                     </Box>
                </a>
                <a href="#">
                    <Box width="100%" bg="lightgrey" 
                         p={2}><Gi3DGlasses />
                    </Box>
                </a>                
                <a href="#">
                    <Box width="100%" bg="olive" p={2}>
                         <Gi3DStairs/>
                     </Box> 
                </a>                
                <a href="#">
                    <Box width="100%" bg="lightgrey" 
                         p={2}><Md10K />
                     </Box>
                </a>
                <a href="#">
                    <Box width="100%" bg="olive" 
                         p={2}><Md123 />
                    </Box>
                </a>
            </Flex>
    );
} 
export default IconApp;

Output:

React Chakra UI Media and icons

React Chakra UI Media and Icons component is tailored for managing media content and displaying icons and images. Chakra UI provides a set of commonly used interface icons you can use in your websites or apps. It helps the user provide a better user experience by identifying functionalities by looking at the media and icons images for hovering and helps the process work faster by just looking at them.

ReactJS Chakra UI provides multiple ways of using media icons as mentioned below.

Table of Content

By using the Chakra UI icon library
By using a third-party icon library
By using your own created icons.

Tags:

#Chakra UI #ReactJS #Web Technologies

Steps to Create the React Application And Installing Module:

By using your own created icons.

By using a third-party icon library

React Chakra UI Media and icons

Similar Reads

Contact Us