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

pnpm add x-icon-vue

• Install NPM package

npm install x-icon-vue

Usage

Global registration:

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

// App.vue
<template>
  // Dynamic icon component - Use PascalCase for iconName prop
  <XIcon :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
  <XIcon :iconName="iconName" color="blue" size="50" type="linear" />
</template>

<script>
import { XIcon } from "x-icon-vue";
export default {
  components: {
    XIcon
  },
  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) |