iconsax for Vue

A total of 6000 icons in 6 different designs | Only supported for vue3

Browse icons

About the Project

the features of this package include the following:

• 1000 icons in 6 different types
• Perfectly balance
• 24px grid-based
• Lightweight, powerful and easy to use

Installation

• Install Yarn package

yarn add vue-iconsax

• Install NPM package

npm install vue-iconsax

Usage

Global registration:

// main.js
import { VsxIcon } from "vue-iconsax";
const app = createApp(App);
// Dynamic icon component - Use PascalCase for iconName prop
app.component("VsxIcon", VsxIcon);
app.mount("#app");

// App.vue
<template>
  // Dynamic icon component - Use PascalCase for iconName prop
  <VsxIcon :iconName="iconName" color="blue" size="50" type="linear" />
</template>

<script>
export default {
  props:['iconName']
};
</script>

Local registration:

<template>
  // Dynamic icon component - Use PascalCase for iconName prop
  <VsxIcon :iconName="iconName" color="blue" size="50" type="linear" />
</template>

<script>
import { VsxIcon } from "vue-iconsax";
export default {
  components: {
    VsxIcon
  },
  props:['iconName']
};
</script>

Props

Prop	Type	Default	Note
color	string	currentColor	css color
size	number string	24px	size="24" or :size="24"
type	Linear Outline TwoTone Bulk Broken Bold	Linear	icons styles
iconName	string		iconName is only required with vsx-icon tag (Dynamic icon imports)

Contact

Emad Moghimi jaxtheprime@gmail.com

Project Link: https://github.com/JaxThePrime/vue-iconsax