By using your own created icons.
Example 3: The following code demonstrates to create your own custom icons. This also use the Icon component and createIcon() function for creating own custom icons as desired.
import {
ChakraProvider, Text,
Flex, Box
} from "@chakra-ui/react";
import MyIcon from "./CustomIcons";
import CircleIcon from "./CircleIcon";
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 Create Custom icons</b></h3>
<br/>
<CircleIcon />
<MyIcon />
</ChakraProvider>
);
}
export default App;
// Filename - CircleIcon.js
import { Icon } from "@chakra-ui/react";
const CircleIcon = () => (
<Icon viewBox='0 0 200 200'
boxSize={10} color='green.500'>
<path
fill='currentColor'
d='M 100, 100 m -75, 0 a 75,75
0 1,0 150,0 a 75,75 0 1,0 -150,0'
/>
</Icon>
)
export default CircleIcon;
// Filename - CustomsIcons.js
import { Icon, createIcon }
from "@chakra-ui/react";
const MyIcon = createIcon({
displayName: 'myIcon',
viewBox: '0 0 200 200',
d: 'M 100, 100 m -75, 0 a
75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
})
export default MyIcon;
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.
Contact Us