Friday, September 5, 2025
HomeLanguagesReact Suite Icon createIconFont Props

React Suite Icon createIconFont Props

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>neveropen</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>neveropen</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>
  );
}


Output:

 

Reference: https://rsuitejs.com/components/icon/#code-create-icon-font-code

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32264 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6634 POSTS0 COMMENTS
Nicole Veronica
11801 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11863 POSTS0 COMMENTS
Shaida Kate Naidoo
6750 POSTS0 COMMENTS
Ted Musemwa
7025 POSTS0 COMMENTS
Thapelo Manthata
6701 POSTS0 COMMENTS
Umr Jansen
6718 POSTS0 COMMENTS