React.js Blueprint Icon Component CSS

Last Updated : 17 Aug, 2022

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. In this article, we will discuss React.js BluePrint Icon Component CSS.

Icon component is used to easily render SVG icons in Our React App. Icons can also be rendered using pure CSS. It uses the icon fonts provided by the @blueprintjs/icons package. To render an icon as an icon-font two classes are required, one for telling which icon to render and one for the size of the icon.

React.js BluePrint Icon Component CSS Classes:

bp4-icon-standard: This is a sizing class used for the standard size of the icon i.e 16px.
bp4-icon-large: This is a sizing class used for the large size of the icon i.e 20px.
bp4-icon-ICON_NAME: This class is used to tell which icon to render. The ICON_NAME part can be replaced by name of an icon, for example, bp4-icon-circle.
bp4-intent-primary: This class is used for primary intent for an icon.
bp4-intent-success: This class is used for success intent for an icon.
bp4-intent-warning: This class is used for warning intent for an icon.
bp4-intent-danger: This class is used for danger intent for an icon.

Syntax:

<span 
    class="bp4-icon-standard bp4-icon-confirm" 
    style={...}>
</span>

Creating React Application And Installing Modules:

Step 1: Create a React application using the following command:

npx create-react-app myApp

Step 2: After creating your project folder i.e. myApp, move to it using the following command:

cd myApp

Step 3: After creating the ReactJS application, Install the required modules using the following command:

npm install @blueprintjs/core @blueprintjs/icons

Project Structure: After following the above steps, the project structure will look as below:

Example 1: Now write down the following code in the App.js file. In this example, we used the CSS classes with a span element to render the icons.

File: app.js

JavaScript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css'

function App() {

    const iconStyle = { marginLeft: "30px" };
    const divStyle = {
        display: 'block', width: 500,
        padding: 30, textAlign: "center"
    };
    return (
        <div style={divStyle}>
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h4>ReactJS Blueprint Icon Component CSS</h4>
            <span 
                class="bp4-icon-standard bp4-icon-confirm" 
                style={iconStyle}>
            </span>
            <span 
                class="bp4-icon-standard bp4-icon-clean" 
                style={iconStyle}>
            </span>
            <span 
                class="bp4-icon-large bp4-icon-code" 
                style={iconStyle}>
            </span>
            <span 
                class="bp4-icon-large bp4-icon-circle" 
                style={iconStyle}>
            </span>
        </div>
    );
}

export default App;

Steps to run the app:

Execute the following command from your project folder to run the app.

npm start

Output:

Example 2: In this example, we used the intent classes to change the color of the icons.

File: app.js

JavaScript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css'

function App() {

    const iconStyle = { marginLeft: "30px" };
    const divStyle = {
        display: 'block', width: 500,
        padding: 30, textAlign: "center"
    };
    return (
        <div style={divStyle}>
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h4>ReactJS Blueprint Icon Component CSS</h4>
            <span 
                class="bp4-icon-standard 
                bp4-icon-confirm bp4-intent-success" 
                style={iconStyle}>
            </span>
            <span 
                class="bp4-icon-standard 
                bp4-icon-clean bp4-intent-danger" 
                style={iconStyle}>
            </span>
            <span 
                class="bp4-icon-large 
                bp4-icon-code bp4-intent-primary" 
                style={iconStyle}>
            </span>
            <span 
                class="bp4-icon-large 
                bp4-icon-circle bp4-intent-warning" 
                style={iconStyle}>
            </span>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/components/icon.css

React.js Blueprint Icon Component CSS

writer01

Improve

Article Tags :

React.js Blueprint Icon Component CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?