Registry / web-framework / vue-icons-plus

vue-icons-plus

JSON →
library0.1.9jsnpmunverified

Vue Icons Plus is a comprehensive collection of over 50,000 SVG icons from popular icon libraries, designed for easy integration into Vue.js projects. Supporting Vue 3 and Vue 2.7+, it allows developers to import and use icons directly as components. The package, currently at version 0.1.9, follows a modular import structure where icons are accessed from subdirectories corresponding to their original icon pack (e.g., `vue-icons-plus/fa` for Font Awesome). This design minimizes bundle size by only including the necessary icons. Its release cadence appears to be ad-hoc based on bug fixes and new icon pack additions. Key differentiators include its vast selection of icons and explicit support for both modern Vue setups and older Webpack environments through separate `@vue-icons-plus/sfc-X` packages, although these have install time trade-offs.

web-framework
npm install vue-icons-plus
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VUE-ICONS-PLUS
V
vue-icons-plus
web-frameworkjavascriptv0.1.9
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

FaBeer
✓ import { FaBeer } from 'vue-icons-plus/fa';
✗ import FaBeer from 'vue-icons-plus/fa'; const { FaBeer } = require('vue-icons-plus/fa');
Icons are named exports from specific sub-paths corresponding to icon families (e.g., `fa` for Font Awesome). Incorrectly importing as a default or using CommonJS `require` in modern environments will fail. This pattern applies to all icon families like `bi`, `md`, etc.
BiSearch
✓ import { BiSearch } from 'vue-icons-plus/bi';
✗ import { BiSearch } from 'vue-icons-plus'; import BiSearch from 'vue-icons-plus/bi';
It is crucial to import icons from their specific sub-path (e.g., `/bi` for Bootstrap Icons) rather than the root package or attempting default imports. This ensures tree-shaking and correct component resolution.
FaBeer (Webpack 3/4)
✓ import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';
✗ import { FaBeer } from '@vue-icons-plus/sfc-1/fa/FaBeer';
For projects using older Webpack versions (3 or 4) or large applications needing specific splits, icons are default exports from `@vue-icons-plus/sfc-X` packages. The full path to the component file is required, and named imports will not work.

Demonstrates importing and using multiple icons from different families (Font Awesome, Bootstrap Icons, Material Design) as components in a Vue 3 setup with `<script setup>`.

<script setup lang="ts"> import { FaBeer } from "vue-icons-plus/fa"; import { BiSearch } from "vue-icons-plus/bi"; import { MdHome } from "vue-icons-plus/md"; // Assuming MdHome exists in Material Design pack </script> <template> <div class="icon-showcase"> <h1>My Icon Showcase</h1> <p>Enjoy a refreshing beer:</p> <FaBeer class="icon large-icon" /> <p>Search for something great:</p> <BiSearch class="icon medium-icon" /> <p>Go back home:</p> <MdHome class="icon small-icon" /> <p>These icons are imported directly and rendered as SVG components in Vue 3.</p> </div> </template> <style> .icon-showcase { font-family: sans-serif; padding: 20px; text-align: center; } .icon { display: inline-block; vertical-align: middle; margin: 10px; color: #3498db; /* Example color */ } .large-icon { font-size: 3em; } .medium-icon { font-size: 2em; } .small-icon { font-size: 1.5em; } </style>
Debug
Known issues
gotchaAlways import icon components from their specific icon family sub-paths (e.g., `vue-icons-plus/fa`, `vue-icons-plus/bi`). Attempting to import directly from the root `vue-icons-plus` package will result in undefined components or import errors, as the main package does not export individual icons directly.
fix
Ensure your import statements target the correct sub-path: `import { IconName } from 'vue-icons-plus/icon-family-code';`
affects: >=0.1.0
gotchaWhen using `vue-icons-plus` with Vue 2.7+, icon components must be explicitly registered within the `components` option of your Vue component. This manual registration step is typically not required for Vue 3 projects due to its automatic component resolution.
fix
For Vue 2.7+: `export default { components: { FaBeer } }`. For Vue 3, typically no extra step is needed after import in `<script setup>`.
affects: >=0.1.0
gotchaFor projects constrained by older bundler environments (e.g., Webpack 3 or 4) or very large projects, `vue-icons-plus` offers split packages (`@vue-icons-plus/sfc-1`, `@vue-icons-plus/sfc-2`, etc.). These packages have a significantly longer installation time and require different import paths (e.g., `import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';`).
fix
If encountering installation issues or performance bottlenecks with the main package in older environments, consider using `npm install @vue-icons-plus/sfc-X` and adjust imports to `import IconName from '@vue-icons-plus/sfc-X/family/IconName';`. Be aware of the increased installation duration.
affects: >=0.1.0
gotchaThe separate `@vue-icons-plus/sfc-X` packages, while solving 'npm restrictions' for older bundlers, export icons as default components from their specific file paths. Using named imports (e.g., `import { FaBeer } from ...`) with these packages will lead to `undefined` imports or runtime errors.
fix
When using `@vue-icons-plus/sfc-X` packages, always use default imports with the full component path: `import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';`
affects: >=0.1.0
Errors
Common errors & fixes
This dependency was not found: * in ./node_modules/vue-icons-plus/...
Attempting to import an icon component directly from the root `vue-icons-plus` package or a non-existent sub-path, rather than the correct icon family directory.
fix
Verify that your import statement includes the specific icon family sub-path, e.g., `import { FaBeer } from 'vue-icons-plus/fa';` instead of `import { FaBeer } from 'vue-icons-plus';`
Error: [Vue warn]: Failed to resolve component: FaBeer If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
The icon component was imported but not correctly registered or resolved in a Vue 2.7+ environment, or an incorrect import path was used.
fix
For Vue 2.7+, ensure components are explicitly registered: `export default { components: { FaBeer } }`. For both Vue 2.7+ and Vue 3, double-check the import path for the icon component, especially the icon family sub-path.
Upgrade
Version history
0.1.9latest on npm
Audit
Dependencies
vuerequiredPeer dependency for Vue.js component integration.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
githubhttps://github.com/vue-icons-plus/vue-icons-plus ↗
packagehttps://www.npmjs.com/package/vue-icons-plus ↗
homepagehttps://vue-icons.com ↗
vue-icons-plus — npm install vue-icons-plus · libregistry