{"id":12504,"library":"vue-iconsax","title":"Iconsax Icon Pack for Vue","description":"vue-iconsax is a JavaScript package providing a comprehensive set of Iconsax icons specifically designed for Vue 3 applications. It is currently at version 2.0.0 and focuses on delivering 6000 icons across 6 distinct design styles (Linear, Outline, TwoTone, Bulk, Broken, Bold), all meticulously crafted on a 24px grid. The library emphasizes lightweight usage and ease of integration, differentiating itself by exclusively supporting Vue 3 and offering dynamic icon loading through a single `VsxIcon` component. This approach streamlines icon usage by eliminating the need for individual icon imports, enabling developers to render any available icon simply by passing its PascalCase name as a prop. The package's release cadence appears tied to updates from the core Iconsax library and Vue 3 ecosystem developments.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/JaxThePrime/vue-iconsax","tags":["javascript","vue","icons","iconsax","icon components","vue components"],"install":[{"cmd":"npm install vue-iconsax","lang":"bash","label":"npm"},{"cmd":"yarn add vue-iconsax","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-iconsax","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 component integration. The library is built exclusively for Vue 3.","package":"vue","optional":false}],"imports":[{"note":"The primary and typically only component for rendering all Iconsax icons dynamically via props. This library is ESM-only since v2.0.0 and explicitly requires Vue 3. Using CommonJS `require` will lead to errors.","wrong":"const VsxIcon = require('vue-iconsax')","symbol":"VsxIcon","correct":"import { VsxIcon } from 'vue-iconsax'"},{"note":"When registering globally with `app.component('VsxIcon', VsxIcon)`, ensure it's a named import. Attempting a default import will fail as `vue-iconsax` exports `VsxIcon` as a named export.","wrong":"import VsxIcon from 'vue-iconsax'","symbol":"VsxIcon (for global registration)","correct":"import { VsxIcon } from 'vue-iconsax'"},{"note":"When importing for local component registration, ensure `VsxIcon` is spelled with correct PascalCase. JavaScript is case-sensitive, and a mismatch will prevent the component from being resolved.","wrong":"import { Vsxicon } from 'vue-iconsax'","symbol":"VsxIcon (for local registration)","correct":"import { VsxIcon } from 'vue-iconsax'"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport App from './App.vue';\nimport { VsxIcon } from 'vue-iconsax';\n\n// main.js - Global registration of VsxIcon component\nconst app = createApp(App);\napp.component('VsxIcon', VsxIcon);\napp.mount('#app');\n\n// App.vue - Example usage in a Vue component\nexport default {\n name: 'App',\n setup() {\n const iconNames = ['Activity', 'Archive1', 'Bookmark', 'Chart', 'Cloud'];\n let currentIndex = ref(0);\n const currentIcon = ref(iconNames[currentIndex.value]);\n\n const cycleIcon = () => {\n currentIndex.value = (currentIndex.value + 1) % iconNames.length;\n currentIcon.value = iconNames[currentIndex.value];\n };\n\n return {\n currentIcon,\n cycleIcon\n };\n },\n template: `\n
\n

Dynamic Iconsax Demo

\n \n

Current Icon: {{ currentIcon }}

\n \n
\n `\n};","lang":"javascript","description":"This example demonstrates how to globally register the `VsxIcon` component in `main.js` and then dynamically change the displayed icon in an `App.vue` component using Vue 3's Composition API."},"warnings":[{"fix":"Ensure your project is running Vue 3.x. If using Vue 2, you must either upgrade your Vue project or find an alternative icon library compatible with Vue 2.","message":"vue-iconsax v2.0.0 and subsequent versions are exclusively designed for Vue 3 and are not compatible with Vue 2 applications. Attempting to use it in a Vue 2 project will result in runtime errors.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always refer to the official Iconsax documentation or browse the available icons to ensure the exact PascalCase name is used for the `iconName` prop.","message":"The `iconName` prop for the `VsxIcon` component strictly requires icon names to be provided in PascalCase (e.g., 'Add', 'Home', 'UserSearch'). Using kebab-case, snake_case, or any other casing will result in the icon not rendering.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always use the `VsxIcon` component and pass the desired icon name as a string to the `iconName` prop.","message":"This library does not support individual icon component imports (e.g., `import { AddIcon } from 'vue-iconsax'`). All icons are dynamically loaded and rendered solely through the generic `VsxIcon` component by specifying the icon's name via the `iconName` prop.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Globally register the component in your `main.js` file using `app.component('VsxIcon', VsxIcon)` or import and declare it in the `components` option of your specific Vue component.","cause":"The `VsxIcon` component has not been correctly registered within your Vue application, either globally or locally.","error":"Failed to resolve component: VsxIcon"},{"fix":"Double-check that the `iconName` prop exactly matches an existing Iconsax icon in PascalCase and that the `type` prop (e.g., 'linear', 'bold', 'broken') is one of the six supported values and correctly spelled.","cause":"This usually indicates an incorrect `iconName` prop value (e.g., misspelled, wrong casing) or an invalid `type` prop.","error":"Icon not displaying, or showing as a blank space/broken image."},{"fix":"Ensure your project is configured for ES Modules. If using Node.js, add `\"type\": \"module\"` to your `package.json` or use `.mjs` file extensions. For bundlers like Webpack or Vite, ensure they are configured to handle ES Modules correctly.","cause":"This error occurs when trying to use ES module `import` syntax in a CommonJS environment (e.g., older Node.js versions or misconfigured bundlers). `vue-iconsax` is an ESM-only package.","error":"Uncaught SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}