EIcon

EIcon is a UI element that provides popular icons from iconsax and tabler in your Vue projects view [Demo] (/)

• More info about icon packages here.

Usage <EIcon/>

We provide icon support using the EIcon component to render icons directly, and it takes three props :

Prop	Type	Note
name	String	Specifies the icon name .
iconPack	String	Specifies which library the selected icon is from : iconsax or tabler
options	Object	Specifies icon features.

NOTE

• The default value of iconPack for the whole project is iconsax and can be changed via app.config.js and toggled globally using the src/store/iconStore file. But if you want to use an icon from the tabler library without changing the default iconPack value, you can always use the iconPack prop to specify your desired library name for that specific icon.

• We also save the icon pack value in localStorage and its key name is iconPack.

How to use EIcon Component?

Adding an icon to your project is so easy :

tabler

<template>
  <EIcon name="shopping-bag" iconPack="tabler"/>
</template>

iconsax

<template>
  <EIcon name="Bag"/>
</template>

How to style an icon using EIcon Component?

The option prop makes it easy to specify your selected icon's features. It has the following properties:

tabler

const options = {
    size: 24,
    color: "currentColor",
    class: "",
    strokeWidth: "1.5",
};

iconsax

const options = {
    size: 24,
    color: "currentColor",
    class: "",
    type: "linear",
};

Use icon inside other elements

Some UI elements have props you can use to add icons (props like prependIcon, appendIcon, icon, etc.).

To display an icon, the name property of icon props must be present. All other attributes are optional.

tabler

const icon = {
    name: "Eye",
    iconPack: "tabler",
    size: 24,
    color: "currentColor",
    class: "",
    strokeWidth: "1.5",
}

iconsax

const icon = {
    name: "Eye",
    iconPack: "iconsax",
    size: 24,
    color: "currentColor",
    class: "",
    type: "linear",
}

Show me an example 👀

Suppose you want to create a download button with a prepend icon. Here's an example of how you can do it:

<template>
  <EBtn :prependIcon="{ name: 'ImportCurve' }"> Download</EBtn>
</template>

The above example shows a button with ImportCurve icon which belongs to the Iconsax library. ✨