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:
Project Structure
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" }}>neveropen</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" }}>neveropen</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
