Introduction
Icons play a crucial role in enhancing user interfaces and creating visually appealing designs. We have integrated most popular icon libraries into our components and made it easy to customize them. Let's take a look at how to use them.
Top-layer customization
It is best to place icons inside spans or other wrapper elements to provide
better and easier customization. In most cases, placing
svg
icons causes no need to add new styles.
You can use any icon library you want, but we recommend using Heroicons as they are created by Tailwind CSS team.
Let's take a look at how to customize icons in our components using top-layer customization.
Button
Rating
Customization via options and data attributes
In our components, which have icons in their structure, we have provided the possibility of customization via options and data attributes.
Datetimepicker
Let's take a look at how to customize icons in our Datetimepicker component via options or data attributes.
Via data attributes
Via options
Other icon libriaries
Let's take a look at how to integrate other popular icon libraries in TWE.
Font Awesome
There are two ways to integrate Font Awesome into TWE. You can use the SVG code or FA package.
Using SVG icons
Choose the icon you want from the Font Awesome website and copy the SVG code. Then paste it into the component's template.
Using FA package
You can setup Font Awesome in your project using a package manager or CDN. In this example, we will use the CDN. If you want to use the package manager method, you can check out the Font Awesome documentation.
Step 1
Add import rule to your CSS file.
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@tailwind base;
...
Step 2
Choose the icon you want from the Font Awesome website and copy the HTML code. Then paste it into the component's template.
Google icons
Step 1
Go to the
Google Fonts
website and choose the icon you want. Copy content of href attribute of the
link tag from static icon font
section and add import rule to
your CSS file.
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
@tailwind base;
...
Step 2
Now you can use the google icons you want in the TWE components.