React Feather Icons
Overview
Icons are a powerful tool for enhancing the user experience of a website. They are used to quickly and easily convey information and add visual interest to a web page. Icons can be used on the navigation bars (to denote the homepage, product cart etc.) to denote actions, provide visual interest to the user, provide accessibility etc. When selecting icons for a website, it's important to choose icons that are clear, recognizable, and consistent. A library of pre-designed icons, such as Feather Icons, can be a great resource for finding icons that match the style and tone of your website.
What is React Feather?
React Feather is a collection of lightweight, customizable, beautiful, open source, and easy-to-use icons for React.js. It provides a simple way to include icons in your React.js projects using the popular Feather icon set. The icons are rendered as SVG elements, which allows for easy styling and customization. React Feather is available as an npm package and can be easily installed and used in any React.js project. Each icon is designed on a 24X24 px grid, and they are available as an individual SVG file, which can be easily edited and scaled to fit your project's needs.
Important Package to Install
To use React Feather icons, all you have to do is install the react feather library using the following command:
Alternatively,
In React.js feather can be used in the following manner;
In case you want to import all of the icons instead of importing them individually, you can do that as depicted below:
Props can be easily used to customize the icons:
In case you are unable to use ES6 imports, then you can add the icons from the dist directory present inside the npm package folder:
Uses of React Feather
Feather is primarily a library of SVG files. As a result, Feather icons can be used in the same manner as SVGs (like img, background-image, inline, object, embed etc.).
You can utilize Feather in the following other ways.
Client Side javaScript
The first step would be to install React Feather on our project using npm.
Note: The installation step can be skipped in case you want to use React Feather using the CDN links.
Then we would need to add either the feather.js or feather.min.js to our project inside the script tag.
Note: The feather.js and feather.min.js files can be found inside the dist folder inside the npm package.
Another way of adding the feather.js or feather.min.js file is by using the CDN link inside the script tag.
Feather will be accessible as a global variable when the script has been included.
To display an icon on your webpage, give the HTML element a data-feather property containing the name of the icon:
All the numerous icons provided by React Feather are listed on feathericons.com, and you can visit the site to see these icons.
Now the next step is to invoke the feather.replace() function inside the script tag at the bottom of your file.
Every HTML element with a data-feather property gets replaced with an SVG that corresponds.
Node
First, we need to install the feather icons using npm:
Then we need to require this library to use it:
Now we can use the library in our code as mentioned below:
There are various properties and functions available for the feathered object.
SVG Sprite
First we need to install the feather icons using npm (This step can be skipped in case of using a CDN link).
Now you can use any number of icons on your web application. All you have to do is to add the below-mentioned markup in your code:
In place of circle, you need to mention the name of any of the icons you want to use on your page.
You can observe from the above code that for every line of code, you need to write many lines of code, and this issue can be solved by writing a simple CSS class so that we do not need to repeatedly write the same markup:
Figma
It is very easy to use feather icons in Figma. Feather icons are available as a Figma community plugin, and to use it, you only need to login to your Figma account and search for Feather icons and add the plugin then, you can easily access the feather icons.
:::
API References for React Feather
feather.icons
feather.icons is an object provided by the JavaScript implementation of Feather Icons that contains all of the icons available in the library. Each key in the object corresponds to the name of an icon and the value is an object that contains information about the icon, including its SVG path data and dimensions.
Here you have to specify the name of the icon you want to use in place of x, and also keep in mind that for icon names having more than one word, the dot notation does not work. For that, you have to write the code in the following manner:
You can use this bracket notation in place of the dot notation for single-word names also.
feather.icons[name].toSvg([attrs])
The feather.icons[name].toSvg([attrs]) method is a part of the JavaScript implementation of the Feather Icons library. It allows you to generate an SVG string representation of a specific icon, using the specified attrs object to customize the appearance of the icon.
The name parameter is a string that specifies the name of the icon you want to generate. This should match the name of the icon file in the Feather Icons library. For example, to generate the SVG for the feather icon, you would use:
The attrs parameter is an optional object that can be used to customize the appearance of the generated SVG. This object can include any valid SVG attributes, such as width, height, fill, stroke-width, stroke-linecap, and stroke-linejoin. For example, to set the fill colour of the icon to red, you would use:
Once you have called the toSvg() method, it will return the SVG string representation of the icon, which you can then use in your HTML or JavaScript. For example, you could use the following code to add the icon to a div element in your HTML:
It is worth noting that this method is part of the javascript implementation of feather icons and not for React feather. In React feather, you can import the icon you need and use the icon in your component like this.
The attrs parameter is passed as properties to the component, and the component takes care of generating the SVG.
feather.replace([attrs])
feather.replace([attrs]) is a method provided by the JavaScript implementation of Feather Icons that allows you to replace all <i> elements on a page with SVG versions of the icons specified in the data-feather attribute of the element.
The attrs parameter is an optional object that can be used to customize the appearance of the generated SVG. This object can include any valid SVG attributes, such as width, height, fill, stroke-width, stroke-line cap, and stroke-line join. This is useful if you want to set a specific colour, size, or other properties for all of the icons that are replaced.
The SVG tag will inherit all the properties from the placeholder element(<i>):
Turbocharge Your React Journey! Dive into Our Full Stack Training Course with React-Expert Instructors. Enroll Now!
Conclusion
We have covered the following points in this React.js tutorial:
- React Feather is a collection of lightweight, customizable, beautiful, open source, and easy-to-use icons for React.js.
- Each icon is designed on a 24X24 px grid, and they are available as an individual SVG file, which can be easily edited and scaled to fit your project's needs.
- Feather icons can be used in React.js, client-side javaScript, node.js, SVG Sprite, as well as on Figma.
- feather.icons is an object provided by the JavaScript implementation of Feather Icons that contains all of the icons available in the library.
- The feather.icons[name].toSvg([attrs]) method allows you to generate an SVG string representation of a specific icon, using the specified attrs object to customize the appearance of the icon.
- feather.replace([attrs]) is a method that allows you to replace all <i> elements on a page with SVG versions of the icons specified in the data-feather attribute of the element.