How to use Ant Design’s Icons in Your React Application

Grace Chiamaka — Tue, 24 Mar 2020 11:15:33 +0000

Ant Design is an amazing React UI library of flexible high-quality reusable components. However, if you’re not familiar with the library trying to use the icons in a react application can take you a minute or two to figure out.

So here’s what I figured out.

To include ant’s design Icon’s in your application, first, you need to have installed the library using

             `npm install antd` or `yarn add antd`

Once you’ve installed the library, you also need to install this

               `npm install @ant-design/icons`

Once this is installed successfully, you’ll have access to the library icons

On the library documentation, you can find the list of applications available to you here. You can find icons in three categories, outlined, filled and two-toned.
You select an Icon you wish to use copy and include it in your code but you need to also import the icons into code where you want to use it.
you can import the code by using this

   `import { CaretDownFilled } from '@ant-design/icons'`

you can now use this icon as a component changing the colour as you wish or two colours if you chose a two-toned icon, e.t.c.

Here's an example of how I used the caret-down icon

The library's documentation provides information on properties that you can use with the icons and is easy to read and understand. Hope you found this article useful. Leave a comment if you wish to. Cheers!!!

Forem: Grace Chiamaka

How to use Ant Design’s Icons in Your React Application