React Suite Icon createIconFont Props

Last Updated : 17 Jul, 2022

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Icon Prop createIconFont. React suite contains various popular libraries of icons like Fontawesome, Material Design, AntDesign, etc. It also allows using Iconfont icons which are also very popular. The createIconFont prop method allows us to import icon resources and use them in our components.

createIconFont Props:

commonprops: It defines extra properties to the component.
scriptUrl: It uses the js URL generated online by an icon font.cn, or you can use the local URL.

Using React Icons Component:

Step 1: Install the @rsuite/icons package into your project directory.

npm install --save @rsuite/icons

Step 2: Import the Icons in your function component from the package.

import { Icon } from '@rsuite/icons';

Syntax:

import { createIconFont } from '@rsuite/icons';

const IconFontIcons = createIconFont({
  scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
  commonProps: { style: { fontSize: 10 } },
});

function App() {
    <IconFontIcons icon="rs-icongear-16" />
}

Example 1: Below example demonstrates the basic implementation of the createIconFont prop.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { createIconFont } from '@rsuite/icons'; 
  
const IconFontIcons = createIconFont({ 
  scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js', 
  commonProps: { style: { fontSize: 40, marginRight: 10 } }, 
}); 
  
export default function App() { 
  return ( 
    <center> 
      <div> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
            React Suite createIconFont Prop</h4> 
  
        <div style={{ marginTop: 20, width: 400 }}> 
          <IconFontIcons icon="rs-iconnotice" 
                  color="green" /> 
          <IconFontIcons icon="rs-iconemail-fill" 
                  color="green" /> 
        </div> 
      </div> 
    </center> 
  ); 
} 

Output:

Example 2: Below example demonstrates the animated icons using createIconFont prop.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { createIconFont } from '@rsuite/icons'; 
  
const IconFontIcons = createIconFont({ 
  scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js', 
  commonProps: { style: { fontSize: 40, marginRight: 10,  
                            color: 'orange' } }, 
}); 
  
export default function App() { 
  return ( 
    <center> 
      <div> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
            React Suite createIconFont Prop</h4> 
  
        <div style={{ marginTop: 20, width: 400 }}> 
          <IconFontIcons icon="rs-icongear-16" spin/> 
          <IconFontIcons icon="rs-iconreload" pulse /> 
        </div> 
      </div> 
    </center> 
  ); 
} 