2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Components

Icon

Add the icon to your web application in style.

Skewind is compatible with all svg icons libraries. We have installed some of these icon libraries, including but not limited to: feather, heroicons, dripicons, ionicons, flag-icons and flat-color-icons.

You can see and search the list of available icons here:

See all available icons

Usage

Data API

The easiest way to insert an icon onto your webpage is by using our Data API. You just have to add the data-icon="{iconName}" attribute to any element that you want.

Javascript

On some occasions, you may need to use javascript to insert an icon. We have done our best to document it at the moment.

Methods

From the Icon object, you can call any of these methods initially.

Method Description
Icon.replace(wrapperElement) Basically, this method is used by the Data API to replace all data-icon="{iconName}" with the constructed svg contents by the specified icon name.
Icon.create(iconName, attrs) Create an instance of the icon with the name specified, then followed by calling toSvg(attrs). attrs is an object used to append some attributes to the output of svg code. Eg: Icon.create('feather__x').toSvg({ class: 'w-10 h-10' })